图像宽度/高度作为属性还是在CSS中？

指定图像高度和宽度的"正确"语义方式是什么？在CSS ...

width:15px;

或内联......

？

CSS似乎是放置视觉信息的正确位置.另一方面,很少有人认为图像"src"不应该被指定为属性,并且高度/宽度看起来像二进制图像数据那样与"src"相关联.

(是的,我从技术的,最终用户的角度来看,这无关紧要.)


1> VirtuosiMedi..：
它应该内联定义.如果您使用的是img标记,那么该图像应该具有内容的语义值,这就是验证所需的alt属性的原因.

如果图像是布局或模板的一部分,则应使用img标记以外的标记,并将图像作为CSS背景分配给元素.在这种情况下,图像没有语义含义,因此不需要alt属性.我相当肯定大多数屏幕阅读器甚至不知道存在CSS图像.

        
无论是问题还是答案似乎都不能理解语义HTML的概念.无论您放置它们的位置,高度和宽度都是表现属性.对于语义,我们确定图像对alt标记中的内容的含义.我不记得为什么它对HTML中的宽度/高度如此重要,但我怀疑它是否是你没有CSS渲染的浏览器.这不是一个语义问题.如果有的话,它会在一定程度上阻止关注点的分离. 
这个问题与宽度属性无关,而与实际图像本身无关？ 
是的,确切地说是正确的答案.Img标签用于信息,css背景用于布局. 
它们会导致汽车保证金完全不同的行为.如果你有一个固定的元素,例如顶部/底部/左/右设置为零,你在其中粘贴一个图像,你想中心包裹在一个div中,那么为了将该div与自动边距居中,你必须指定一个CSS宽度/高度,因为指定HTML属性宽度/高度无效,边距保持为零.我不知道为什么存在差异.例如:https://jsfiddle.net/L1rk46xy/查看居中文本.删除固定div上的"样式"标签,并观察它尽管有宽度/高度属性而失去居中. 

2> 小智..：
我认为这取决于你如何使用该属性.如果要在列表或表格中设置多个图像样式以使它们正确布局,则将宽度/高度放在CSS中,以避免需要为列表中的每个图像添加另一组标记.使用类似的东西

ul.gallery img: { width:117px; } 


另一方面,如果要将图像插入某些内容并且需要使用一定的大小才能使文档正确流动,请将其放入HTML中.这样您就不必为html中的每个不同图像设置样式表.这样,如果您将内容更改为不同的图像,将所有图像一起删除,则您的CSS中没有残留的代码以便记住删除.

        

3> 小智..：
高度和宽度应包含在HTML中.原因是它在页面上创建了间距.如果由于某种原因img无法加载(并且你是一个好孩子并且包括一个alt ...浏览器将显示该帧(使用w和h提供)和alt里面.

主要的有益理由是防止"流行"效应.当浏览器加载页面时,有时像img这样较大的方面需要更长时间才能加载,如果你没有在HTML中指定w和h,浏览器会暂时崩溃该区域,认为它不在那里.然后,当它最终加载所有弹出到适当的位置.

这特别令人讨厌,但在计算机上仍然非常烦人,因为你要点击一个链接,突然页面向下移动,你不小心点击了错误的链接.

        

4> stevenvh..：
我会说CSS. 

HTML是关于内容的,

CSS是关于表示的.

        
问题是图像是内容,如何显示它是信息.内容的非呈现属性仍然是内容. 

5> 小智..：
如果你看一下HTML5规范,指定高度和宽度是一个选项而不是一个要求.因此,无论有没有这些属性,代码都有效.

从实际的观点来看,非常希望指定它们以防止如上所述的页面回流.然而那些暗示它应该在html中的人因为这个缺少了浏览器在最初构建页面时使用css的事实.如果它们没有,则必须为浮动元素,指定的填充,边距等重新绘制页面.

是否在html或css中指定最好根据具体情况来判断.大量相同大小的图像最好用css,一个带html的图像.也就是说,如果你为图像指定其他样式(边框颜色,样式或半径,浮动等),那么为css添加宽度和高度是有意义的.

如果您在html中指定,则只能使用像素.如果你想用百分比来指定你必须使用css.

另外,我们鼓励使用ems&%而不是px来帮助避免在用户更改浏览器设置等时出现问题,但图像总是以像素为单位引用.显然,将px用于图像有一些实际的原因.然而,在px中保留图像似乎否定了不使用它们的论点.