我正在使用这个问题接受的表格布局答案: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查询解决方案,如果这是唯一的方法来做到这一点。
感谢您的任何想法和帮助!