Object-fit: Cover; Alternative?

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 elem

Solution 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

Solution 2:

I had similar issue. I resolved it with just CSS.

Basically Object-fit: cover was not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.

The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Once it is in the centre, I give to the image,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

This makes the image get the effect of Object-fit:cover.

---

Here is a demonstration of the above logic.

https://jsfiddle.net/furqan_694/s3xLe1gp/

This logic works in all browsers.