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

我目前使用的是这个问题的公认表格布局答案：将两个图像相邻放置，保持它们的纵横比，并在缩放时保持它们的高度相同。我也希望有一个8px的左填充每个图像。我希望填充物保持8px，无论ul/表有多宽

下面是我正在研究的JSFIDLE：

以下是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>

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

• 在图像中添加8px的左边填充
• 将8px的左边填充添加到列表项
• 在图像中添加8px的左边距
• 在列表项中添加8px的左边距
• 将8px白色左边框添加到图像
• 添加包含宽度设置为8px的“占位符”跨距的其他列表项

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

---

谢谢你的建议和帮助

诀窍是保持一个维度固定（在本例中为高度），而另一个维度保持自动（在本例中为宽度）。浏览器将为您完成一切。对于列表项，可以是float或

display:inline block

，使它们并排放置

---

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

我想我已经找到了解决方案。它可能会从图像的顶部切掉几个像素，但我认为这是不可察觉的

参见JSFIDLE：

添加以下内容：

li {
  overflow: hidden;
}

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

li {
  overflow: hidden;
}

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