Html 如何使图像的高度/宽度/填充自动缩放以适合图像

我想做的是让这个网站上的图片在50-60px之间改变宽度和高度（它们应该相等）。然而，它们之间都需要有一个5px的最小填充。这可能因图像的大小而异，因为两个末端图像需要适合父div的边缘，以便与父div周围的图像对齐。高度/宽度/填充都应该更改，以确保在屏幕大小更改时图像仍然正确对齐

如果你看这一页，你就会明白我的意思。需要更改的图像是底部的灰色正方形

这是我的html：

<div class="smallImages">
    <div><a href="#item-1"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-2"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-3"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-4"><img src="static/img/smallImage.png"></a></div>
</div>

---

抱歉，如果这看起来很混乱。问问你是否需要我解释一下。

这就是你想要的

显示内联块不会让图像以您需要的方式使用表

您只需检查您正在使用的站点的源代码即可

.row{
显示：表格行；
}
.smallImages{
左侧填充：0px；
边缘底部：0px；
显示：表格；
文本对齐：居中；
}
.smallImages.row div{
显示：表格单元格；
填充物：5px；
}
.smallImages.row div：第一个孩子{
左侧填充：0；
}
.smallImages.row div img{
最大宽度：100%；
}
img{
边界：0；
}

---

一个选项是设置宽度百分比，但该百分比取决于行中图像的数量。请参见此示例：

*{
框大小：边框框；/*您需要此选项，以便高度和宽度包括填充和边框*/
}
.集装箱{
宽度：400px；/*将此值设置为您喜欢的任何值，它仍然可以工作*/
填充物：5px；
边框：1px实心；
}
.行{
宽度：100%；
填充：0 5px；
}
.row img{
填充物：5px；
}
.第1排img{
宽度：100%；
}
.第二排img{
宽度：50%；
}
.第三排img{
宽度：33.33%；
}
.第四排img{
宽度：25%；
}

目前还不清楚您希望实现什么目标。您还缺少高度、宽度和高度img@JamieBarker是的，我知道我很难解释。基本上，我希望行末尾的图像与上面的大图像对齐it@DCdaz这是我问题的一部分！我需要它们随着屏幕大小的改变而改变。不，你不需要css来改变，你仍然需要定义图像的高度和宽度来进行渲染。此外，你还需要更清楚地说明你在这里想要实现的目标。这只起到了一半的作用。你刚刚从我给你的其中一页上取下了代码，并把它放在了一个答案中，而没有考虑到我也需要从另一页上取东西的事实。。。

smallImages div {
    display: inline-block;
    padding: 5px;
}
.smallImages div img {
    max-width: 60px;
    min-width: 50px;
    max-height: 60px;
    min-height: 50px;
}