0

大家好，我对 htmlIMG标签的高度和宽度以及 CSS/STYLE 高度和宽度有点困惑

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

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

4

5 回答 5

1

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

于 2013-09-29T12:47:29.247 回答
1

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

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

这同样适用于height.

于 2013-09-29T12:47:35.777 回答
1

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

有人可能会争辩说，通过 HTML 属性设置它们可以让浏览器知道图像的尺寸——因此在图像尚未加载时渲染页面时他必须保留的空间——甚至更早；但我怀疑这个论点在现实中是否成立，因为在现代浏览器中渲染 AFAIK 通常仅在 CSS 已加载时才开始，无论如何 CSS 很可能会极大地影响整个页面布局，所以即使浏览器要保留图像空间一开始只知道 HTML，一旦应用了 CSS，他将不得不重新渲染大部分页面。

于 2013-09-29T12:48:16.963 回答
1

它们是相同的，但是如果您像这样定义，那么您在 html 中定义的最后一个将采用浏览器的宽度。

于 2013-09-29T13:10:49.503 回答
1

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

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

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

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

于 2013-09-29T14:48:46.323 回答