使图像适合容器，不适合对象：包含

Question

下面的代码是制作图片的完美方案：

适合给定的容器
在容器中水平和垂直居中
使用最大可能的尺寸
不改变纵横比

完美，除了图书馆 html2canvas doesn't work with object-fit: contain; (see also Html2canvas Ignores Object fit for image).

问题：如何在没有相对较新的 object-fit 的情况下使用标准 CSS 规则获得相同的行为？

.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>

我尝试了 How do I auto-resize an image to fit a 'div' container? 的各种答案，但它们在前面显示的所有 4 个案例中都不起作用。

Answer 1

正如我之前在评论中所说，对于小于容器的图像，如果没有 javascript 可能是不可能的，但如果你找不到 css 解决方案，我已经做了这个简单的例子：

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

编辑。 我做了另一个 JSFIDDLE 更紧凑 script 而没有 jquery

Answer 2

改用background-image

.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>

使图像适合容器，不适合对象：包含

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

html

css

aspect-ratio

object-fit