如何保持并排图像的纵横比，保持图像高度相同并在图像之间固定填充？

Posted 2023-03-06

【中文标题】如何保持并排图像的纵横比，保持图像高度相同并在图像之间固定填充？

【英文标题】：How do I maintain the aspect ratio of side-by-side images, keep the images the same height AND have fixed padding between images?

【发布时间】：2016-12-31 00:17:01

【问题描述】：

我目前正在使用这个问题中公认的表格布局答案：Scale different width images to fit a row and maintain equal height 将两个图像彼此相邻放置，保持它们的纵横比，并在缩放时保持它们相同的高度。我还希望在每个图像上都有一个 8px 的左填充。无论 ul/table 有多宽，我都希望填充保持 8px。

这是我正在开发的 jsfiddle：https://jsfiddle.net/maryjames0/u1o5Lkmf/

这是 html：

<ul>
<li><img src="http://walops.com/wp-content/uploads/Puppy-Awesome-Wallpaper-100x100.jpg" /></li>
<li><img src="http://photos.the-scientist.com/legacyArticleImages/2011/08/panda-200x100.jpg" /></li>
</ul>

还有 CSS：

body 
  margin: 0;

ul 
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;

li 
  display: table-cell;

img 
  display: block;
  width: 100%;
  height: auto;

到目前为止，我尝试了以下方法，但均未成功：

为图像添加 8px 的 padding-left 向列表项添加 8px 的 padding-left 为图像添加 8px 的左边距 向列表项添加 8px 的左边距 为图片添加 8 像素的白色左边框 添加包含“占位符”跨度且宽度设置为 8 像素的其他列表项

理想情况下，我想用 CSS 解决这个问题，但如果这是唯一的方法，我愿意接受 javascript/jQuery 解决方案。

感谢您的任何想法和帮助！

【参考方案1】：

我想我找到了解决办法。它可能会从图像顶部切掉几个像素，但我认为它足够不引人注意。

见 jsfiddle：https://jsfiddle.net/kfsfu9bx/

添加这个：

li 
  overflow: hidden;


img 
  float: right;
  margin-top: -4px;
  width: calc(100% - 8px);

【参考方案2】：

诀窍是保持一个维度固定（在本例中为高度），同时将另一个维度保持为自动（在本例中为宽度）。浏览器会为你做一切。对于列表项，浮动或display:inline-block，因此它们并排放置。 https://jsfiddle.net/u1o5Lkmf/5/

您可能需要一些 JavaScript 来找到最小的图像并将较大的图像调整到它而不是硬编码的固定高度。