Html 在CSS中缩放时如何保持图像的宽度

我试图在保持高度的同时保留一些并排的图像。我试过这个：

.row {
  float: left;
  border: 3px solid red;
  margin-left: 8%;
  margin-right: 8%;
  display: inline-block;
}

.row img {
  width: 16%;
  height: auto;

}

这是它在web上的显示方式：

---

我希望高度相同，你认为我做错了什么？

VXp的图像响应代码非常适合获得相同高度的所有图像

我甚至添加了一个宽图像，它也被转换为全高

.行{ 显示器：flex； 柔性包装：包装； 浮动：左； 左缘：8%； 右边距：8%； 高度：200px； } .row img{ 宽度：自动； 高度：自动； 最大宽度：100%； 最大高度：100%； 填充：0px 2px； }

---

重点是使图像具有响应性：

.行{ /*浮动：左*/ display:flex；/*以内联方式显示图像*/ 边框：3倍纯红； 左缘：8%； 右边距：8%； /*显示：内联块*/ } .row img{/*响应性*/ 宽度：自动； 高度：自动； 最大宽度：100%； 最大高度：100%； 显示：块； }

---

你在这里的目标一点也不明确。是否希望图像在保持高度的同时水平收缩？你想让图像扭曲吗？在任何情况下，你都应该包含你的HTML。你能看到红色框中图像的高度吗？我希望它们相等@bryan60，然后将高度设置为100%，但这将导致图像扭曲，这通常不是web开发人员所追求的。@ekeith您是否也可以包含html，以便我们可以测试它？如果我将其设置为固定值，例如200px，可能还需要查看这些图像的实际尺寸，如果我减少我的浏览器或切换到移动设备，它看起来像被压扁了。我试图在codepen中复制它，给我5分钟。