在HTML或CSS中指定图像大小的区别 [英] The difference between specifying image size in html or css

问题描述

这个链接非常接近我的问题，但似乎适用于语法而不是实际呈现的输出：

我看到图像的高度和宽度可以被定义在实际的html img 标签中，实际上我读它的方式是应该在那里定义。但是，我想知道什么时候它实际上是如何显示图像的。如果我插入以下代码

< img src =images / academia_vs_business.pngwidth =740height =382alt =/>

没有css stlying应用于图像，它会被渲染为原始宽度和高度吗？

如果我 do 将css样式添加到该图片中，如

  img {
 width：400px 
} 
  

它否决了HTML的宽度属性？

如果我没有指定图像的高度和宽度html是唯一的问题，我没有将实际图像大小传达给非可视用户代理或者是否存在其他问题（例如浏览器无法为 imgs 在页面加载过程中）。





如果CSS无论如何改变图像大小，是不是在html标签中指定大小多余？

我想这一切都可以归结为放置图像和放大图像的最佳实践，我很乐意听取其他技术。

解决方案

从 W3C网站：



UA可以选择在HTML源文档中遵循表示属性。如果是这样，这些属性将被转换为相应的CSS规则，其特异性等于0，并被视为在作者样式表的开头处插入。因此它们可能会被随后的样式表规则覆盖。在过渡阶段，此政策将使文体属性更容易与样式表共存。 这个答案 这个问题了解更多详情

This link comes very close to my question, but seems to apply to syntax more than to actual rendered output:

I see that image height and width can be defined in the actual html img tag, in fact the way I read it it should be defined there. However, I am wondering about what matters when it actually comes to how the image is displayed. If I insert the following code

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

with no css stlying applied to the image, will it be rendered at it's native width and height?

If I do add css styling to that image, as in

img {
    width: 400px
}

Will it overrule the width attribute of the html?

If I do not specify the height and width of an image in the html, is the only problem that I am not conveying the actual image size to a non-visual user agent or are there other problems (such as the browser can't allocate space for the imgs during page load).

Isn't specifying size in the html tags redundant if the css is going to change image size anyway?

I guess this all could be summed up as the best practice to place and size images and I would love to hear others techniques.

解决方案

From the W3C website:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

See this answer to this question for more details

这篇关于在HTML或CSS中指定图像大小的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！