混淆了Html图像高度和宽度

Question

大家好我对html IMG标签的高度和宽度以及CSS / STYLE高度和宽度感到有点困惑

<img  alt="Title" src="/someimageurl" style="width:150px" width="150" />

您可以看到我使用width设置了style属性，并为Image设置了width属性。当我们使用Image时，这两个属性与我们设置的属性相同还是不同？ 如果它们不同，请以什么方式解释？

Answer 1

他们是一样的。 CSS宽度和HTML宽度之间没有区别。您现在不应该再使用HTML标签为网站设置样式。使用CSS。

Answer 2

width属性是指定宽度的过时方式。您只能使用它指定宽度（以像素为单位）。

另一方面，样式宽度是指定宽度的现代方式，不仅适用于图像，还适用于任何html元素。您可以指定宽度，以像素，点，百分比和其他单位。

同样适用于height。

Answer 3

为每个CSS设置这些值优先于通过HTML属性提供它们 - 因此将它们设置为不同的值通常没有多大意义。

有人可能会争辩说，通过HTML属性设置它们会使浏览器知道图像尺寸 - 因此，当图像未加载时，他必须在渲染页面时保留空间 - 甚至更早;但是我怀疑这个论点会在现实中占据上风，因为在现代浏览器中呈现AFAIK通常只在CSS已经加载时启动，而且无论如何CSS很可能会大大影响整个页面布局，所以即使浏览器是reserver图像空间一开始只知道HTML，一旦应用了CSS，他就必须重新渲染大部分页面。

Answer 4

它们是相同的但是如果你定义的那样你在html中定义的最后一个将通过浏览器获取宽度。

Answer 5

HTML属性width="150"和CSS声明width:150px，当应用于同一img元素时，通常具有相同的效果（因此指定两者都是多余的），但它们不是同样的事情。

HTML属性使文档树中的元素节点将属性width设置为值150。 CSS声明在此处出现在style属性值时，会导致元素节点的width属性的style属性获取值150px。在渲染文档时，浏览器使用width值，解释为m（如果其内在宽度不同，则将图像缩放到该宽度），除非 CSS已启用，在这种情况下应用CSS级联，导致使用150px的值。

因此，如果值不同，style属性中的值将在支持CSS的浏览器中获胜。

HTML属性值必须是纯数字（以像素作为隐含单位）或百分比。在CSS声明中，也允许许多其他单元，例如em单位，可让您按字体大小按比例缩放图像（对文本中显示的小图像很有用），但通常会缩放高度而不是宽度。在这种情况下，您可以使用HTML属性作为后备（对于禁用CSS的情况），基于对典型字体大小的猜测，例如： <img ... height=18 style="height: 1em">。