【问题标题】：Making responsive images with different aspect ratios the same height使具有不同纵横比的响应式图像具有相同的高度
【发布时间】：2014-12-13 14:21:15
【问题描述】：

我正在尝试找出一种方法来使响应式图像行具有相同的高度，而不管每个图像的纵横比或容器的宽度如何。实际图像文件的高度相同，但宽度不同。问题是当容器变小时，在某些宽度下舍入误差会导致图像在高度上相差一个或两个像素。这是一个小提琴http://jsfiddle.net/chris_tsongas/vj2rfath/，调整结果窗格的大小，您会看到在某些宽度处图像不再具有相同的高度。

我正在对来自 CMS 的内容进行样式设置，因此对标记的控制很少，并且只能使用 css 而不是 js。我尝试将图像高度设置为 100%，但这只会使图像成为其原始大小的 100%，而不是容器高度的 100%。这是上面链接的小提琴中的 html 和 css：

<div class="table">
    <div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>
</div>

.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
img {
    max-width: 100%;
}

【问题讨论】：

您可以通过将图像垂直对齐到顶部来减少此问题，但它有时仍会发生在第一张图像的底部 - 我尝试修复此问题一段时间但没有找到解决方案
@retober 你对垂直对齐顶部的想法让我想到了这个解决方法jsfiddle.net/5q96wpjt。我这样做了，然后在每个单元格下方添加了一个伪元素，以隐藏任何高度差异。不知道我是否应该回答这个问题。
不错的解决方案 - 如果它回答了您的问题并解决了您的问题，那就是一个答案。但在 Chrome 上，有时我仍然会看到一些高度差异。

标签： css responsive-design

【解决方案1】：

要使不同纵横比的图像具有相同的高度，您可以通过 NPM 使用开源库 bootstrap-spacer

npm install uniformimages

或者你可以访问github页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“unim”类如何工作的示例（为此您需要 jQuery）：

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

【讨论】：

【解决方案2】：

使用 flex，它就是为这种事情而生的。

.row {
    display: flex;
    justify-content:space-evenly;
}

img {
    max-width: 100%;
}

<div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>

【讨论】：

这对我不起作用。我建议不要羞于使用 javascript 并根据这个问题采取行动：stackoverflow.com/questions/60958533/… i。 e.根据图像的纵横比计算弹性探针：jsfiddle.net/Sempervivum/q2sv813r

【解决方案3】：

您想为单元格内的图像设置样式，并将其限制为单元格大小，因此您需要更改：

img { 
  max-width:100%
}

到

.cell img {
  height:50%;
  width:auto /* This keeps the aspect ratio correct */
}

Updated Fiddle

你仍然可以对桌子做任何你想做的事情，但这会使图像保持相同的高度。

【讨论】：

不幸的是，在这种情况下，图像不再响应，它们是固定大小（原始高度的一半）。