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

Question

我目前正在使用这个问题的公认表格布局答案: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 的 margin-left
• 为列表项添加 8px 的 margin-left
• 为图片添加一个 8px 的白色左边框
• 添加包含宽度设置为 8px 的“占位符”跨度的其他列表项

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

感谢任何想法和帮助!

Answer 1

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

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