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

我正在使用这个问题接受的表格布局答案：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; 
}

到目前为止，我已经试过以下没有成功：

添加填充左8像素的对图像
添加填充左的8像素到列表项
添加边缘左8像素的对图像
添加边缘左8像素的至列表中的项目
添加一个8像素的白色左边框的图像
加入含“占位符”其他列表项跨越与宽度设置为8像素

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

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

来源

2016-08-24 Mary James

诀窍是保持一个维度固定（在这种情况下高度），同时保持另一个在自动（在这种情况下宽度）。浏览器将为您做所有事情。对于列表项目，浮动或display:inline-block，所以他们坐在一起。 https://jsfiddle.net/u1o5Lkmf/5/

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

来源

2016-08-24 02:42:40 Joseph

我想我找到了解决方案。它可能会从图像的顶部切掉一些像素，但我认为这并不令人难以理解。

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

补充一点：

li { 
    overflow: hidden; 
} 

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

来源

2016-08-24 03:26:58 Keish

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

回答

相关问题