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>的大小可以在页面流中以正确的大小创建一个物理占位符，从而使您的内容可以异步加载，而不会中断用户体验。

或者，如果您正在进行移动响应式设计，这是最近的最佳做法，指定宽度（或最大宽度）仅并将高度定义为{{}是很常见的1}}。这样，当您为不同的屏幕宽度定义媒体查询（例如CSS）时，您可以简单地调整图像宽度，让浏览器处理保持图像高度/宽高比正确。这是一种中间立场方法，因为您可能会获得一些回流，但它允许您支持多种屏幕尺寸，因此效益通常超过负面。

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

最重要的是，您需要了解权衡取舍并确定哪种策略对您要实现的目标最有意义。

Answer 3

虽然可以使用内联样式，但最好通过在页面上包含外部CSS文件来实现目的。这样你就可以定义一类图像（即'缩略图'，'照片'，'大'等），并为其指定一个恒定的大小。当您最终需要跨多个页面放置相同位置的图片时，这将有所帮助。

像这样：

In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />

In css/style.css:
img.thumbnail {
   width: 75px;
   height: 75px;
}

如果你想使用内联样式，为了便于阅读，最好使用样式属性设置宽度和高度。

Answer 4

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

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

Answer 5

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

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

从长远来看，由于HTML属性的弃用，CSS可能会胜出，而且更可能是由于像SVG这样的矢量图像格式的增长，实际上使用非像素的单位（如％或em）缩放图像是有意义的。 / p>

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 width / height参数（因此图像显示的方式与我想要的一样..调整为55px x 55px。所以一切都很顺利好像。

当我通过设置mime type application / msword或将浏览器渲染粘贴到msword文档将页面输出到ms-word文档时，所有图像都恢复为默认大小。我终于发现msword正在丢弃样式并使用img width和height标签（它具有原始图像大小的值）。

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

欢呼声。

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

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

7 个答案: