HTML宽度/高度属性和img元素上的CSS width / height属性有什么区别？ [英] What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

问题描述

HTML < img> 元素可以具有宽度 / 高度属性， CSS width / height 属性。

The HTML <img> element can have the width / height attribute, and it can also have the CSS width / height properties.

<img src="xxx.img" width="16" height="16" 
style="width: 16px; height: 16px"></img>

HTML属性和CSS属性之间有什么区别，它们应该具有相同的效果吗？

What's the difference between the HTML attribute and CSS property and should they have the same affect?

推荐答案

关于这个主题的热烈争论可以在这里找到：图片标记与CSS的宽度属性

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

总结：

声明宽度值
和高度值（可能不是
原始的物理尺寸
的图像）或从css声明
（如width：[valueX]; height：
[valueY];）是它有助于加快
页面的呈现。浏览器
知道多少空间来分配一个
页面的特定区域：它将
甚至绘制图像占位符在
第一次绘制，第一次解析+渲染
。当没有定义
任何宽度和高度时，浏览器
必须下载图像，然后
计算其尺寸，空间到
分配，然后重新绘制页面。

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

这似乎是我认为最有利的效果。

This seems to be the most beneficial effect in my opinion.

这篇关于HTML宽度/高度属性和img元素上的CSS width / height属性有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！