我想缩放图像以适合屏幕大小。我已经尝试了一些预期的东西，但它们都是基于宽度缩放的，我需要一些可以基于高度缩放的东西。
如果我使用max-width，它会按计划工作。而如果我使用max-height，它似乎什么也做不了。
<img src="https://i.imgur.com/9OPnZNk.png" style="max-width:20%;height:auto;">
<p>The above scales as intended, and is using the max-width property.</p>
<img src="https://i.imgur.com/9OPnZNk.png" style="width:auto;max-height:20%;">
<p>The above doesn't scale as intended, and is using the max-height property.</p>我该如何解决这个问题？
2条答案
按热度按时间jrcvhitl1#
我也遇到了这个问题，有时看起来有点奇怪，但如果你把
max-height:20%;改为max-height:20vh;"，它会工作，你把它缩放到视口高度的20%，这会得到相同的结果。不是一个真实的的解决方案，而是一个变通办法，我希望这能有所帮助
yptwkmov2#
试着将主体的高度设置为绝对值（100 vh等），否则，它将简单地根据主体的高度进行缩放，默认设置为“auto”;因此，它将尽可能地扩展以适应其子项。
由于
img也被设置为相对单位（... %），并且其父对象也有相对高度（“auto”），因此它将简单地尽可能多地缩放（在我们的示例中为800像素单位）。