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

Posted 2023-03-05

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

【英文标题】：Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]

【发布时间】：2011-01-25 17:59:48

【问题描述】：

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

<img src="images/academia_vs_business.png"    />

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

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

或两者兼而有之？

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

【问题讨论】：

请记住，同时指定 height 和 width 属性可能会导致奇怪的缩放问题。通常我只会指定使其适合您的设计所需的属性（通常是宽度），然后浏览器会将高度重新调整为正确的比例。

【参考方案1】：

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

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

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

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

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

【参考方案2】：

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

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

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

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

【讨论】：

等等，如果你没有提前知道图片大小，你怎么把它添加到 CSS 中？

@CamiloMartin CSS 和/或内联样式，可以以编程方式设置。此外，动态更改的图像可能具有定义的大小，但仅基于在页面呈现时未知的特定页面状态。

内联 CSS 将具有相同的图像大小效果，外部 CSS 在加载后也会具有相同的效果，这应该不是问题。我认为您不会看到未设置样式的标记

@AliGangji 内联 CSS 对于可维护性和可缓存性都是不好的做法。关于无样式标记/页面重排，这是一个非常真实和常见的问题，对于未调整大小的图像尤其常见。参考：en.wikipedia.org/wiki/Flash_of_unstyled_content

@bmoeskau 我并不反对这是不好的做法，只是指出 CSS 可以具有相同的图像大小效果。看到没有样式的内容可能比我想象的更常见。我能在其中看到的唯一最新浏览器版本是 Opera。

【参考方案3】：

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

像这样：

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

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

【参考方案4】：

<img id="uxcMyImageId" src"myImage"   />

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

【讨论】：

如果我错了请纠正我，但火狐不会为您的图像保留屏幕空间。但是我也会使用这种方法。除非我正在制作缩略图。在那种情况下，我会在列表上设置一个 CSS 选择器

你确定吗？因为我注意到然后采用了这种方法..

CSS 高度/宽度不也一样吗？

@user1767586 我被告知没有。由于ZX12R所说，最好在img标签上指定

【参考方案5】：

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

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

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

【参考方案6】：

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

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

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

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

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

【参考方案7】：

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

  <img style="width:55px;height:55px"   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 下。

【讨论】：

啊，你看，你的问题是你使用的是 ms-word...