html - 为什么在元素中保持高度和宽度之间的比例？

Question

如果我只是写一个像这样的简单代码：

<img src="mycat.jpg" height="300px";>

现在，如果图像非常大，高度会减小到300px，宽度也会自动减小以适应高度大小。这是为什么？我认为，如果未指定宽度，它会保持在“自动”状态，这意味着元素的宽度会调整为内容的宽度，在这种情况下，是原始图像大小的宽度。当我改变元素的高度时，图像的高度也会改变以适应元素大小，但为什么宽度也会改变？一定是因为比例是固定的。是这样吗？

是的，我知道，如果我设置width为100%，图像将扩展以填充元素块的整个宽度，但为什么如果它设置为自动，它会调整到元素的高度而不是停留在由于元素的宽度没有改变，图像的原始大小？

此外，是否有一种实际的方法来改变内容的大小，即图像本身，而不是改变包含图像的元素的大小？我可以使用display:flex和更改元素和图像之间的空间，那么有没有办法只针对图像而不是整个元素本身？

标签： htmlcss

Answer 1

默认情况下，当您尝试赋予图像高度而不是宽度以保持其外观2160px时height，3840px图像会 被缩放在paint中调整图像的大小，初始比例如下所示widthwidth300pxheightheight168px

当您将其调整为 300px 的宽度时，它也会看起来像这样