为什么我需要“身高：自动”对于响应图像？ [英] Why do I need "height: auto" for responsive images?

问题描述

现在是否有必要定义 height：auto ？

Is it necessary to define the height: auto now days? and what the reasons is?

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

谢谢。

推荐答案

可确保始终以原始宽高比显示图像。这是实现图像响应显示的一种常见技术。重要的部分实际上是始终仅设置 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.

这篇关于为什么我需要“身高：自动”对于响应图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！