Question

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

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

我尝试过的潜在灵魂：

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

Here就是它目前所做的一个例子。 here是我想要它做的一个例子，而没有强制CSS中的高度。

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

Answer 1

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

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

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

Answer 2

下面是代码：

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