指定图像高度和宽度的"正确"语义方式是什么？在CSS ...
width:15px;
或内联......
<img width="15"
？
CSS似乎是放置视觉信息的正确位置.另一方面,很少有人认为图像"src"不应该被指定为属性,并且高度/宽度看起来像二进制图像数据那样与"src"相关联.
(是的,我从技术的,最终用户的角度来看,这无关紧要.)
Vir*_*dia 75
它应该内联定义.如果您使用的是img标记,那么该图像应该具有内容的语义值,这就是验证所需的alt属性的原因.
如果图像是布局或模板的一部分,则应使用img标记以外的标记,并将图像作为CSS背景分配给元素.在这种情况下,图像没有语义含义,因此不需要alt属性.我相当肯定大多数屏幕阅读器甚至不知道存在CSS图像.
小智 18
我认为这取决于你如何使用该属性.如果要在列表或表格中设置多个图像样式以使它们正确布局,则将宽度/高度放在CSS中,以避免需要为列表中的每个图像添加另一组标记.使用类似的东西
ul.gallery img: { width:117px; }
另一方面,如果要将图像插入某些内容并且需要使用一定的大小才能使文档正确流动,请将其放入HTML中.这样您就不必为html中的每个不同图像设置样式表.这样,如果您将内容更改为不同的图像,将所有图像一起删除,则您的CSS中没有残留的代码以便记住删除.
小智 16
高度和宽度应包含在HTML中.原因是它在页面上创建了间距.如果由于某种原因img无法加载(并且你是一个好孩子并且包括一个alt ...浏览器将显示该帧(使用w和h提供)和alt里面.
主要的有益理由是防止"流行"效应.当浏览器加载页面时,有时像img这样较大的方面需要更长时间才能加载,如果你没有在HTML中指定w和h,浏览器会暂时崩溃该区域,认为它不在那里.然后,当它最终加载所有弹出到适当的位置.
这特别令人讨厌,但在计算机上仍然非常烦人,因为你要点击一个链接,突然页面向下移动,你不小心点击了错误的链接.
根据MDN 上的<img> 文章，HTML 属性表示图像的内在尺寸，即它的实际尺寸。这就是为什么 HTML 4 也允许百分比值，而 HTML5 只允许 px 值。（常见的陷阱：不应该写“px”）
如果要显示具有这些尺寸的图像，就完成了。否则，您还必须添加 CSS 来指定显示大小。
当然，最好以显示的大小提供图像，以避免浏览器调整大小，节省带宽等，但这并不总是可行的。
另请参阅此问题的答案：HTML 和 CSS 的宽度属性有什么区别？
小智 5
我会说HTML。
width 和 height 属性用于阻止页面以脱节的方式加载和增长。
如果您曾经阅读过页面上的一段文字，但由于上面的延迟加载图片而将其向下推，您就会知道这有多令人沮丧！
为每个图像添加一个 ID 只是为了指定其宽度和高度将是荒谬的，并且几乎与添加两个宽度/高度属性一样混乱。
问题是 Firefox 没有使用 width 和 height 属性来保留图像空间，但是我很惊讶他们实际上没有更新它。
小智 5
如果你看一下HTML5规范,指定高度和宽度是一个选项而不是一个要求.因此,无论有没有这些属性,代码都有效.
从实际的观点来看,非常希望指定它们以防止如上所述的页面回流.然而那些暗示它应该在html中的人因为这个缺少了浏览器在最初构建页面时使用css的事实.如果它们没有,则必须为浮动元素,指定的填充,边距等重新绘制页面.
是否在html或css中指定最好根据具体情况来判断.大量相同大小的图像最好用css,一个带html的图像.也就是说,如果你为图像指定其他样式(边框颜色,样式或半径,浮动等),那么为css添加宽度和高度是有意义的.
如果您在html中指定,则只能使用像素.如果你想用百分比来指定你必须使用css.
另外,我们鼓励使用ems&%而不是px来帮助避免在用户更改浏览器设置等时出现问题,但图像总是以像素为单位引用.显然,将px用于图像有一些实际的原因.然而,在px中保留图像似乎否定了不使用它们的论点.