CSS动态调整图像的高度答案

【问题标题】：CSS resize heights of images dynamicallyCSS动态调整图像的高度
【发布时间】：2018-05-08 22:38:50
【问题描述】：

我正在为我的一门计算机科学课程开发一个图像共享网站，当我尝试向用户实际显示图像时遇到了麻烦。我让用户标记他们的图像，并显示匹配一个或多个标签的图像。但是，当我尝试显示具有不同纵横比的图像时，它看起来很丑。我希望所有图像都具有相同的高度，但允许它们的宽度发生变化以保持纵横比。

如果我为每一行设置一个固定高度（例如.row { height: 30vh; }），我可以很容易地解决我的问题，但是当我尝试使用动态高度时我遇到了问题。

我尝试过的潜在灵魂：

flex—flex让图片相互叠加，因为我事先不知道大小，所以我不能真正使用.img{ flex: NUMBER; }。
div — 我将 imgs 包裹在 divs 中，并调整了 img 的大小以适合。这是我找到的最常见的答案，除了它与普通img 的原因不同：我事先不知道高度，所以我无法设置div 的高度。我也用span 试过这个，但也没有用。
table——我尝试使用table，带有一个tr标签，每张图片都写成<td><img src="..." ></td>，但这也不起作用，也不是我想要的；我不想要表格，因为我只有一列。
li——每个单独的列表元素都在一个新行上，但我希望尽可能多的元素在同一行上，并且有一个要点。没错，我可以删除项目符号并让行换行，但它仍然不能解决问题。
理论上，我可以通过 JavaScript 或 PHP 加载所有图像（取决于我是在服务器端还是客户端），找到它们的宽度，然后使用它。但是，这似乎非常hacky，我想要一个更好的解决方案。

Here 是它当前正在做的一个例子。 here 是我想要它做的一个例子，而不是在 CSS 中强制高度。

如果可能的话，我想只用纯 CSS + HTML 来做这件事，但我不确定是否可以使用 JavaScript。

【问题讨论】：

【解决方案1】：

使用 width: auto 会告诉浏览器根据比例计算宽度。

img {
  width: auto;
  height: 500px;
}

这里有一个jsFiddle 向您展示。我希望这就是你的意思。

【讨论】：

我试过了。但是您仍然需要设置height: 500px，这是“硬编码”高度。我需要它，所以本质上，height 是最大图像的高度。如果我有一个 50x10 和一个 1000x1000，我想要它，所以 50x10 会变成 1000x200

【解决方案2】：

下面是代码：

img {
    max-width:100%;
    height:auto;
}

【讨论】：