更新时间:2023-11-06 10:08:46
可确保始终以原始宽高比显示图像。这是实现图像响应显示的一种常见技术。重要的部分实际上是始终仅设置 width
或 height
代替 auto
。
It makes sure the image is always displayed in the original aspect ratio. It's a common technique to realize responsive display of images. The important part is actually to always set only either width
or height
to soemthin other than auto
. The browser will then resize the image, maintaining the aspect ratio.
最大宽度:100%;
代码示例确保图像的显示范围永远不会超出其父容器。
max-width: 100%;
in your code example makes sure the image is never displayed wider than its parent container.
大多数< img>
具有所谓的固有尺寸(例如JPG,PNG,GIF)。在这种情况下,明确说明 宽度
或高度
都不会使浏览器使用这些固有尺寸作为给定图像的默认值。只要指定了其中一个,另一个便会设置为 auto
。
Most <img>
have so-called intrinsic dimensions (such as JPG, PNG, GIF). In this case, stating neither width
nor height
explicitly makes the browser use those intrinsic dimension as a default for the given image. As soon as you specifiy exactly one of these, the other will be set to auto
.