Object-fit: cover; alternative? [duplicate]

Question

I have an image on my page that I want to keep the ratio of but resize according to screen size. I would like it so that the smaller of the width and height is made to fit the element exactly, and the larger dimension overflows the element.

I found the

object-fit: cover; 

style which would suit my needs but very quickly found out that support for this is extremely limited (pretty much opera only). Is there anything else I can use to achieve this?

Many thanks in advance :)

Answer 1

If you're able to add this image to the page as a background, then you can use:

background-size: cover;

This property can also accept contain value. Experiment with both a bit and you'll see the difference.

cover forces the image to fill the whole container. It means the image will be cropped if its ratio doesn't match the container's ratio.
contain forces the image to fit in the container. It means that image will never go out the bounds of the container. If ratios (image and container) are different, there will be blank spaces on the sides of the image (left & right or top & bottom).

cover and contain values are supported accordingly:

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1