我目前正在使用这个问题的公认表格布局答案: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 解决方案。
感谢任何想法和帮助!
最佳答案
诀窍是保持一个维度固定(在本例中为高度),同时保持另一个维度为自动(在本例中为宽度)。浏览器会为你做一切。对于列表项, float 或 display:inline-block
因此它们并排放置。 https://jsfiddle.net/u1o5Lkmf/5/
您可能需要一些 JavaScript 来找到最小的图像并根据它调整较大的图像,而不是硬编码的固定高度。
关于javascript - 如何保持并排图像的纵横比,保持图像相同的高度并在图像之间固定填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113532/