如何使图像最适合固定比例？

Question

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

我想在每张照片的相同大小的边界框中显示所有这些照片，包括几张奇数大小的照片。边界框由 div of class col-md-4:

决定

<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 具有由 bootstrap 为每个图像设置的相同宽度。高度由图像的纵横比决定。当每张照片都在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>

如果您需要容器的另一个纵横比，请更改 .imagewrapper:before 的 padding-top 值。它可以通过 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 和其他（旧版）浏览器，基本上也适用于本世纪以来的所有浏览器。

如何使图像最适合固定比例？

How to best fit image to a fixed ratio?

css

twitter-bootstrap

responsive-images

bootstrap-4