16

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 :)

Dan
  • 671
  • 2
  • 7
  • 12

2 Answers2

21

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
matewka
  • 9,912
  • 2
  • 32
  • 43
  • Thanks a lot for your reply. I feel like such an idiot, didn't even think about applying the image as a background to the div and then using 'background-size: cover;' . Thanks a bunch for your help and answer :) – Dan Nov 02 '13 at 23:21
  • 1
    I wrote a micro library that applies a fix for all values of `object-fit` to many browsers automatically: https://github.com/bfred-it/object-fit-images/ – fregante Apr 01 '16 at 07:48
  • Dont forget to add: "background-position: center" so it maintains the image centered just like "object-fit: cover". – luisluix Sep 22 '16 at 16:49
11

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.

Furqan Rahamath
  • 2,034
  • 1
  • 19
  • 29
  • Worth mention that this solution introduces a slightly blur in the images – João Alves May 05 '20 at 13:02
  • @JoãoAlves It purely depends on your image resolution if I am not wrong. If otherwise, then I'm curious to learn why. Please share your findings. – Furqan Rahamath May 05 '20 at 13:21
  • 1
    This answer https://stackoverflow.com/a/44168045/1424951 helps to understand why. I was going for your solution and noticed this blur, so I just wanted to let others know what I faced! – João Alves May 05 '20 at 13:25
  • I see. Thanks for sharing. But that adds an additional complicated answer which might not be needed in all cases though. But quite interesting. I hadn't noticed the blur earlier. – Furqan Rahamath May 05 '20 at 13:49