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

Question

关于这个一般性主题有很多问题，但没有一个能满足我的需要。

我需要展示多张图片，每张图片都有自己的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>

第一项：图像较小，保持其原始大小。
第二项：图像是横向的，缩小以适应。
第 3 项：图像是纵向的，已缩小以适合。

这是你需要的吗？