图像大小应该在 img 标签的高度/宽度属性中定义还是在 CSS 中定义？ [复制]

Question

在img 标签的width 和height 属性中定义图像大小是否更好？

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

还是在 CSS 样式中带有宽度/高度？

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

或两者兼而有之？

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

Answer 1

我将在此违背常规，并声明将内容与布局分开的原则（这将证明建议使用 CSS 的答案是正确的）并不总是适用于图像的高度和宽度。

每个图像都有一个固有的、原始的高度和宽度，可以从图像数据中得出。在内容与布局的框架中，我会说这个派生的高度和宽度信息是内容，而不是布局，因此应该作为元素属性呈现为 HTML。

这很像alt的文字，也可以说是从图片中衍生出来的。这也支持任意用户代理（例如语音浏览器）应该具有该信息以便将其与用户相关联的想法。至少，纵横比可以证明是有用的（“图像的宽度为 15，高度为 200”）。这样的用户代理不一定会处理任何 CSS。

规范说width 和height 属性也可用于覆盖实际图像文件中传达的高度和宽度。我不建议将它们用于此目的。要覆盖高度和宽度，我认为 CSS（内联、嵌入式或外部）是最好的方法。

因此，根据您想要做什么，您可以指定一个和/或另一个。我认为理想情况下，原始的高度和宽度将始终指定为 HTML 元素属性，而样式信息应可选地在 CSS 中传达。

Answer 2

在标签中定义高度/宽度的历史原因是，即使在加载 CSS 和/或图像资源之前，浏览器也可以调整页面中实际的 <img> 元素的大小。如果您没有明确提供高度和宽度，<img> 元素将在 0x0 处呈现，直到浏览器可以根据文件调整它的大小。发生这种情况时，一旦图像加载，它会导致页面的视觉重排，如果页面上有多个图像，则会复合。通过高度/宽度调整<img> 的大小会在页面流中以正确的大小创建一个物理占位符，从而使您的内容能够异步加载而不会影响用户体验。

或者，如果您正在进行移动响应设计，这是当今的最佳实践，通常仅指定宽度（或最大宽度）并将高度定义为@987654325 @。这样，当您为不同的屏幕宽度定义媒体查询（例如 CSS）时，您可以简单地调整图像宽度并让浏览器处理保持图像高度/纵横比正确的问题。这是一种中间方法，因为您可能会得到一些回流，但它允许您支持广泛的屏幕尺寸，因此好处通常大于负面。

最后，有时您可能无法提前知道图像大小（图像src 可能是动态加载的，或者可以通过脚本在页面的生命周期内更改）在这种情况下，仅使用 CSS 才有意义。

最重要的是，您需要了解权衡并决定哪种策略最适合您要实现的目标。

Answer 3

虽然可以使用内联样式，但在页面上包含外部 CSS 文件可能会更好地满足您的目的。这样，您可以定义一类图像（即“缩略图”、“照片”、“大”等）并为其分配一个恒定大小。当您最终需要在多个页面中放置相同位置的图像时，这将有所帮助。

像这样：

在您的标题中： 您的 HTML： 在 css/style.css 中： img.thumbnail { 宽度：75px； 高度：75px； }

如果您想使用内联样式，最好使用 style 属性设置宽度和高度以提高可读性。

Answer 4

<img id="uxcMyImageId" src"myImage" width="100" height="100" />

在图像标签中指定宽度和高度是一个很好的做法。这样，当页面加载时，会为图像分配空间，即使图像需要很长时间加载，布局也不会出现任何抖动。

Answer 5

绝对不是两者兼而有之。除此之外，我不得不说这是个人喜好。如果我有许多相同大小的图像来减少代码，我会使用 css。

.my_images img {width: 20px; height:20px}

从长远来看，CSS 可能会因 HTML 属性的弃用而胜出，更有可能是由于 SVG 等矢量图像格式的增长，在这种格式中，使用 % 或 em 等非像素单位来缩放图像实际上是有意义的。

Answer 6

选项 a。 简单的直接转发。所见即所得，便于计算。

选项 b。 内联操作太麻烦了，除非您想拥有一个可以伸展的网站。 IE 如果您使用with:86em，但是现代浏览器似乎在功能上足以满足我的目的......就个人而言，我唯一会使用这样的东西是如果我要创建一个缩略图目录。

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}

<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

选项 c。太杂乱而无法维护。

Answer 7

我正在使用 contentEditable 在我的应用程序中进行富文本编辑。我不知道它是如何通过的，但是当插入图像，然后调整大小（通过拖动其一侧的锚点）时，它会生成如下内容：

  <img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>

（后续测试表明插入的图片不包含这种“流氓”风格的attr+param）。

当由浏览器 (IE7) 渲染时，样式中的宽度和高度会覆盖 img 宽度/高度参数（因此图像显示的方式就像我想要的那样.. 调整为 55px x 55px。所以一切都很顺利好像。

当我通过设置 mime 类型 application/msword 或将浏览器渲染粘贴到 msword 文档将页面输出到 ms-word 文档时，所有图像都恢复为默认大小。终于发现msword是舍弃了样式，使用了img的宽高标签（里面有原图大小的值）。

我花了一段时间才发现这一点。无论如何...我编写了一个javascript函数来遍历所有标签并将img style.width和style.height值“转移”到img.width和img.height中，然后在我继续之前清除style中的两个值将这段 html/richtext 数据保存到数据库中。

干杯。

opps.. 我的答案是.. 不。将这两个属性直接放在 img 下，而不是 style 下。