使具有不同纵横比的响应式图像具有相同的高度
Posted
技术标签:
【中文标题】使具有不同纵横比的响应式图像具有相同的高度【英文标题】：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 上，有时我仍然会看到一些高度差异。 【参考方案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 并根据这个问题采取行动：***.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
你仍然可以对桌子做任何你想做的事情，但这会使图像保持相同的高度。
【讨论】：
不幸的是，在这种情况下，图像不再响应，它们是固定大小（原始高度的一半）。以上是关于使具有不同纵横比的响应式图像具有相同的高度的主要内容，如果未能解决你的问题，请参考以下文章