Make image fit in a container, without object-fit: contain

Question

The following code is a perfect solution to make an image:

fit in a given container
be centered horizontally and vertically in the container
use the maximum possible size
without changing the aspect ratio

Perfect, except that the library html2canvas doesn't work with object-fit: contain; (see also Html2canvas Ignores Object fit for image).

Question: how to obtain the same behaviour with standard CSS rules, without the relatively-new object-fit?

.container { width: 200px; height: 200px; background: blue; }
img { height: 100%; width: 100%; object-fit: contain; }

1:
<div class="container"><img src="https://via.placeholder.com/100x50"></div>
2:
<div class="container"><img src="https://via.placeholder.com/50x100"></div>
3:
<div class="container"><img src="https://via.placeholder.com/500x300"></div>
4:
<div class="container"><img src="https://via.placeholder.com/300x500"></div>

I've tried various answers from How do I auto-resize an image to fit a 'div' container? but they don't work in all the 4 cases shown before.

Not an answer as this example will work JUST when image bigger than container. would be easy to solve the first 2 containers with a bit of javascript but not a that tag in your question https://jsfiddle.net/9stp0mjr/ — Alvaro Menéndez, Apr 06 '22 at 14:06
@AlvaroMenéndez Do you think JS is mandatory if we want to 1) enlarge the img to the largest possible size and 2) avoid `object-fit`? I have added the tag `[javascript]` now. — Basj, Apr 06 '22 at 14:09
I think so but as I'm not 100% sure You may better wait a couple hours in case someone else have a css only solution. Sometime people make some very creative ways to use CSS (often called hacks). but the js would be quite easy and I'm far from beign even decent. Just get the width and the height of the image and if < of container width or height add the container width to the image (or height if height > width.. portrait) — Alvaro Menéndez, Apr 06 '22 at 14:11
Do you want the images to display larger than their native resolution? Or should their maximum width (and height) be the smaller of the container width or image width? — Quasipickle, Apr 06 '22 at 15:50
@Quasipickle `if imageheight < containerheight and imagewidth < containerwidth`, the image should be enlarged to occupy full width or height of the container (keeping the aspect ratio), see my examples #1 and #2 in the code snippet. About your 2nd question, the only thing I know is that html2canvas doesn't like `object-fit` :) — Basj, Apr 06 '22 at 16:40
Ok, I just wanted to verify that enlarging was intended & desired. Try something like this maybe? https://codepen.io/quasipickle/pen/abEYONj?editors=1100 I don't want to put it as an answer because I don't know if it'll work with html2canvas. — Quasipickle, Apr 06 '22 at 16:56

score 1 · Accepted Answer · answered Apr 07 '22 at 16:09

Use background-image instead

.container { 
  width: 200px; 
  height: 200px;
  background-color:blue;
  background-image:var(--bg-img);
  background-repeat:no-repeat;
  background-size:contain;
  background-position: center center;
  
}

<div class="container" style = "--bg-img:url(https://via.placeholder.com/100x50)"></div>

Alvaro Menéndez · Answer 2 · 2022-04-06T15:17:53.083

0

As I said before in the comments maybe not possible without javascript for images smaller than containers but in case you won't find a css solution I have made this easy example:

https://jsfiddle.net/zq7vw2y8/1/

Edit. I have made this other JSFIDDLE with much compact script and no jquery

edited Apr 06 '22 at 15:17

answered Apr 06 '22 at 14:34

Alvaro Menéndez

8,766
3
37
57

Make image fit in a container, without object-fit: contain

2 Answers2