如何将图像最好地拟合到固定比例？

Question

我有一个照片目录，其中大部分的宽高比为 4:3。有一些奇怪的，要在不丢失图片的重要部分的情况下将它们裁剪为 4:3 是不可行的。

我想在每张照片大小相同的边界框中显示所有这些照片，包括少数几张尺寸奇特的照片。边界框由col-md-4 类的div 确定：

<div class="row">
  <div class="col-md-4">
    <!- the image here: -->
    <img class="img img-responsive" src=" ... " />
  </div>
  <div class="col-md-8">
    <!- other stuff -->
  </div>
</div>

对于那些已经是 4:3 的图像，它们都以完全相同的显示尺寸很好地显示，即使图像（文件）大小可能不同，例如，一个可以是 1024x768，另一个是 800x600。

对于“太宽”的图像，我希望它显示为（灰色条表示边界区域的背景）：

对于“太高”的图像，我希望它显示为：

换句话说，每个奇数尺寸的图像都应该根据它是太高还是太胖来“选择”它的高度或宽度以适应边界框。这可以通过 bootstrap 和 css 实现吗？

值得注意的是，目前，边界div 具有由引导程序为每个图像设置的相同宽度。高度由图像的纵横比决定。当每张照片都是 4:3 时，那么高度也都是一样的。所以对于奇数尺寸的照片，高度必须锁定在显示宽度的3/4。

Answer 1

您可以使用 padding-top 和绝对定位（以及一点魔法）来实现：

.imagewrapper {
  display: block;
  position: relative;
  background-color: blue;
  border: 1px solid red;
}

.imagewrapper:before {
  content: '';
  display: block;
  width: 100%;
  /* this is AR of 16:9 calculated 9:16*100 = 56.25 */
  padding-top: 56.25%;
}

.imagewrapper img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="imagewrapper">
  <img src="https://dummyimage.com/1000x200/000/fff" alt="600x400" />
</div>

<div class="imagewrapper">
  <img src="https://dummyimage.com/600x400/000/fff" alt="600x400" />
</div>

<div class="imagewrapper">
  <img src="https://dummyimage.com/400x600/000/fff" alt="600x400" />
</div>

如果您需要容器的其他纵横比，请更改 padding-top 的值 .imagewrapper:before。它可以通过height / width * 100 计算（例如9 / 16 * 100 = 56.25 用于16:6 或4 / 3 * 100 = 133 用于3:4）。

这是如何工作的？

before 元素获得其父元素的 100% 宽度和指定的基于百分比的padding-top 值（例如 56.25%），这使其将其宽度的 56.25% 作为高度，这基本上使其成为一个固定的 AR 框。

图像通过绝对位置、顶部、左侧和变换在此框内居中定位，而其大小由高度和宽度自动包含，但最大高度和最大宽度为 100%。

你可以把它放在任何改变外部元素宽度的东西里面，它应该可以工作。

使用aspect-ratio 可以实现类似的行为，但此解决方案适用于 MSIE 和其他（旧版）浏览器，基本上也适用于本世纪以来的所有内容。