html - 缩放 以适应 约束 - 最好在没有背景图像的情况下进行

Question

我有一个设置为窗口高度 100% 的 div，最大宽度为窗口宽度的 66%。 html 和 body 设置为 100% 和 overflow:none，因此不允许/不可能滚动。

我希望能够缩放任意 <img>尽可能多地填充空间。由于与 <img> 交互的现有 JS 代码，我不想使用背景图片元素。

这似乎是一个显而易见的起点:

<img style="height:100%;max-width:66%">

但是最大宽度似乎来自浏览器高度的百分比，而不是它的宽度。而且它不会保持其纵横比，这绝对是一种不良影响!

我可以使用 JS 来完成这项任务，但如果有的话，我更喜欢 CSS 解决方案吗？看起来应该很简单，但我感觉不是...

Answer 1

如果 img 在 div 内，那么它使用了 div 宽度的 66%，这已经是 66% body 的宽度，如果我理解正确的话。您还可以通过设置 img {width: auto; 使图像自动调整大小并保持其纵横比。 max-width: 100%; 在你的 CSS 中，保持高度不变。

在元素上设置基于百分比的宽度时，宽度通常是根据元素父元素的宽度计算的，这就是为什么您的图像看起来可能比您预期的要小。