在HTML或CSS中指定图像大小的区别

Question

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

我看到图像的高度和宽度可以在实际的html img标签中定义，事实上，按照我的理解，应该在那里定义。然而，我想知道当涉及到图像如何显示时，什么是重要的。如果我插入以下代码

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

没有应用css样式到图像，它会以其本机宽度和高度呈现吗？

如果我给该图像添加css样式，如下所示

img {
    width: 400px
}

它会否覆盖html的width属性？

如果我在html中没有指定图像的高度和宽度，唯一的问题是我没有向非视觉用户代理传递实际的图像大小，还是还有其他问题（例如浏览器无法在页面加载期间为imgs分配空间）。

如果css将更改图像大小，那么在html标签中指定大小是否多余？

我想这可以总结为放置和调整图像的最佳实践，我很想听听其他技术。

- Startec

---

内联CSS通常会覆盖外部CSS，但如果外部CSS具有“！important”属性，则除外。通常情况下，您应避免使用内联CSS，但在图像的情况下，将高度/宽度设置为内联确实是有意义的，尽管使用外部CSS文件进行样式设置也绝对没有问题。 - APAD1

如果你的所有图片都是相同大小（例如400像素），在CSS中明确说明这一点是有意义的（只需一次），避免在HTML中重复。这样可以减小HTML文件的大小，并且如果以后需要将它们修改为425像素，只需在CSS中的一个地方进行更改，而不是在HTML的多个地方进行更改，这样更加方便。 - blurfus

上面img标签中指定的width和height实际上不是内联样式，这很奇怪（您也可以添加内联样式）。 - Startec

Answer 1

从W3C网站：

UA可能选择遵守HTML源文档中的表示属性。如果是这样，这些属性将被转换为相应的CSS规则，其特异性等于0，并被视为插入到作者样式表的开头。因此，它们可能会被后续的样式表规则覆盖。在过渡阶段，这种策略将使样式属性更容易与样式表共存。

有关详细信息，请参见此答案以及此问题。

- Jacques Marais

---

谢谢您提供那个问题的链接。我进行了搜索，只看到了我提供的链接。 - Startec