Absolute background image proportions

[offgabriele]

I'm trying to add a background to a webpage. The problem I having is that if I add .h-screen to make the image occupy all the height of the screen, on small screens the image is shrieked and on large screens there is an annoying whitespace next to the image. What width class should I use to make the image occupy all the screen and maintain proportions? So that on small screen the image is cropped maintaining the same proportions and the same happens on wide screens?
This is the HTML code I'm using right now
<img src="images/red-john-WjwM9UvhVs8-unsplash.jpg" class="absolute top-0 left-0 opacity-25 h-screen">

Thank you for the help.

[olets]

You can do this with object-size: fit, for example https://play.tailwindcss.com/DYwct9Mb7W

or background-size: cover + background-position: center, for example https://play.tailwindcss.com/AN7pxFJkPC

Tailwind maps very closely to vanilla CSS, so continuing to study CSS will be a good investment for making your Tailwind coding even more efficient. Then the question will change from "how can you make a full-screen native-aspect cropped centered image?" to "how can you set background-size with Tailwind?"