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

我目前正在使用此问题中接受的表格布局答案：Scale different width images to fit a row and maintain equal height将两个图像彼此相邻放置，保持其纵横比，并在缩放时保持相同的高度 . 我还想在每张图像上有一个8px的左边填充 . 无论ul / table有多宽，我都希望padding保持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左侧的填充
向列表项添加8px的左侧填充
向图像添加8px左边距
向列表项添加8px左边距
为图像添加8px白色左边框
添加包含“占位符” Span 的其他列表项，其宽度设置为8px

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

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

2 回答

0
我想我找到了解决方案 . 它可能会从图像的顶部切掉几个像素，但我认为这是不可知的 .

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

添加这个：
```
li {
  overflow: hidden;
}

img {
  float: right;
  margin-top: -4px;
  width: calc(100% - 8px);
}
```
回复于 2024-04-27T03:00:33+08:00
0

诀窍是保持一个维度固定（在这种情况下是高度），同时保持另一个维度为自动（在这种情况下为宽度） . 浏览器将为您完成所有事情 . 对于列表项，浮动或 display:inline-block 因此它们并排放置 . https://jsfiddle.net/u1o5Lkmf/5/

您可能需要一些JavaScript来查找最小的图像并将较大的图像调整为它而不是硬编码的固定高度 .

回复于 2024-04-27T03:00:33+08:00

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

2 回答

相关问题