显示图像原始大小，如果可能，否则缩小

Question

关于这个一般主题有很多问题，但是 none 满足了我的需要。

我需要展示多张图片，每张都有自己的 div，但我不知道它们是纵向、横向还是低分辨率。我想做的是显示它们的原始大小（并居中），如果它们适合（即我不想拉伸低分辨率图像），但如果它们大于 div 则缩小它们适当地根据他们的长宽比。

这听起来很简单，但我放弃了 img 元素，建议 width:100%;height:auto; 的解决方案忽略了这样一个事实，即假设是风景图像。

我开始使用背景属性并取得了更大的成功。如果我可以完成这项工作，那么它还有一个额外的好处，那就是它也可以与 IE11 一起使用。例如：

background-image: url("http://example.jpg");
background-position:center center;
background-size: auto;
background-repeat: no-repeat;

如果图像小于 div，效果很好，但如果原始尺寸太大，则裁剪图像。

有没有办法在这种情况下适当缩放尺寸（与 background-size:contain 一样），但尽可能显示原始尺寸？

Answer 1

我认为您可以通过组合以下两个属性来实现您想要的效果：max-width: 100% 和 max-height: 100%:

.container {
  display: flex;
}

.item {
  margin: 1rem;
  width: 200px;
  height: 200px;
  
  border: 1px solid;
  
  display: flex;
}

img {
  max-width: 100%;
  max-height: 100%;
  
  margin: auto;
}

<div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/300x200" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/200x300" />
  </div>
</div>

第一项：图片变小了，保持原来的大小。
第 2 项：图像为横向图像，已缩小以适合。
第 3 项：图像为纵向，已缩小以适合。

这是您需要的吗？

显示图像原始大小，如果可能，否则缩小

Display image original size, if possible, else shrink

css

background-image