关于img元素设置高度

关于img元素
img元素的默认display值是inline,但是一般设置为block,MDN也是这么建议。

虽然设置img元素display: block;,但是其表现并不是完全按照块状元素,“可替换元素”有着自己的一套宽高的计算方式。默认情况下,图片是1:1的形式显示在页面上,并没有像div之类的块状元素一样自动铺满整个宽度。因此,为了防止图像宽度超出页面,一般需要再设置max-width: 100%;。

img元素默认宽高比例是和图片保持一致的,即当你只设置了宽度时,页面会自动计算对应的高度并显示图片,单独设置高度时也是一样的计算;如果你同时设置了宽度和高度,则按照你设置的进行显示。

参考文章:
使用img自动撑开高度

此条目发表在CSS分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注