图像的宽度/高度作为一个属性或在CSS?

什么是“正确”的语义方式来指定图像的高度和宽度? 在CSS中…

width:15px; 

或内联…

 <img width="15" 

CSS似乎是把视觉信息放在正确的地方。 另一方面,很less有人会认为图像“src”不应该被指定为属性,并且高度/宽度看起来像“src”一样被绑定到二进制图像数据。

(是的,我从技术,terminal用户的angular度来看,这并不重要。)

它应该被内联定义。 如果您使用的是img标签,那么该图片应该对内容具有语义价值,这就是validation所需的alt属性的原因。

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

我认为这取决于你如何使用属性。 如果您在列表或表格中定义多个图像 ,以便正确布局,请将宽度/高度放在CSS中 ,以免为列表中的每个图像添加另一组标记。 使用类似的东西

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

另一方面,如果要将图像插入到某些内容中 ,并且需要一定的大小才能使文档正确stream动,请将其放入HTML中 。 这样你就不必为html中的每个不同的图像弄脏样式表。 这样,如果将内容更改为不同的图像,一起删除图像,则不会在CSS中遗留散布的代码以便记住删除。

高度和宽度应该包含在HTML中。 原因在于它在页面上创build了空格。 如果由于某种原因img加载失败(你已经是一个好孩子,并包括一个alt ..浏览器将显示框架(使用提供的w和h)与alt里面。

主要的好处是防止“stream行”效应。 当浏览器加载页面时,如img等较大的方面需要更长的时间加载,如果你没有在HTML中指定w和h,浏览器会暂时崩溃,认为它不在那里。 然后,当它最终加载到适当的地方的一切。

这是特别恼人的,但仍然非常恼人的计算机,因为你要点击一个链接,突然间页面转向下,你不小心点击了错误的链接。

我会说CSS。

HTML是关于内容的,
CSS是关于演示。

如果您查看HTML5规范,则指定高度和宽度不是必需的选项。 因此,代码是有效的,有或没有这些属性。

从实际的angular度来看,非常希望将它们指定为防止上述的页面重排。 然而,那些暗示它应该在HTML中,因为这是浏览器最初构build页面时使用CSS的事实。 如果他们没有页面将不得不重新绘制浮动元素,指定的填充,边距等

是否在html或css中指定最好根据个人情况来判断。 大量的相同大小的图像可能是最好的与CSS,单一的图像与HTML。 也就是说,如果你为图像指定了其他样式(边框颜色,样式或半径,浮点等),将宽度和高度添加到CSS是有意义的。

如果您在html中指定,则只能使用像素。 如果你想说的百分比,你必须使用CSS。

在附注中,我们鼓励使用ems&%而不是px来帮助避免用户更改浏览器设置等问题,但图像总是以像素为单位。 显然有使用px的图像的实际原因。 然而,保持图像的px似乎否定了不使用它们的理由。

我会说HTML。

宽度和高度属性用于阻止页面以不连续的方式加载和增长。

如果您曾经阅读过一个页面上的文本块,只是为了让它向下推,这要归功于上面的延迟加载图片,您知道它有多么令人沮丧!
为每个图像添加一个ID来指定其宽度和高度将是可笑的,就像添加两个宽度/高度属性一样混乱。

赶上火狐不使用宽度和高度属性来保留图像空间,但我很惊讶,他们没有实际更新它。

如果它是你的网站模板的一部分,我会把它放在CSS文件中。

如果只在一个页面上,它应该是内联的(或者在页面特定的CSS块顶部定义)。

我的看法是,它是内容的一部分,正如你所提到的,就像src属性一样。

另一方面,没有必要在HTML或CSS中指定宽度或高度,尽pipe它可以帮助您的页面渲染速度更快。

我可能是错的,如果我是,请有人纠正我…但我认为谷歌和其他search引擎索引alt标签的内容。

有时,为了devise美观,我创build了一个由字体创build的文本的图像,这些字体不能通过HTML获得,但可用于Photoshop,Illustrator等。如果您想要创build一个精确的印刷印象,其中包含文本信息,只有这样做才能达到目的,就是为了search引擎而创build印刷文本的图像,并将实际文本放在alt标签中。

如果有人有更好的解决scheme,我很乐意听到。

与此同时,考虑到我所描述的需求,作为标准惯例,对我来说投票支持HTML内联高度/宽度参数以及替代文本描述似乎是合理的。 事实上,这不仅仅是在这种情况下的devise,而且在CSS和search引擎提出更好的解决scheme之前,这样的情况实际上不应该是规则的例外。

电子邮件客户端如何处理img约束作为属性与内联样式?

 <img src="http://imperavi.com/img/redactor-image.jpg" width="1400" > 

https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared

 <img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" > 

https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared

 <img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " > 

https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared

 <img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" > 

https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared

所以,不应该使用内联样式来设置img大小的限制,主要是因为Outlook 2007/2010/2013不符合这些限制。

当属性和内联样式都在使用时会发生什么? 有些客户使用其中一种,有些则使用内联宽度与属性高度结合使用:

 <img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" > 

https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared

tldr:使用HTML电子邮件的img属性。

我会去W3C推荐。

也就是说,将宽度和高度定义为这样一个属性:

<img src="example.png" width="150" height="150" alt="example image">

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

根据MDN上的<img>文章 ,HTML属性指示图像的固有尺寸,即其真实尺寸。 这就是为什么,而HTML 4也允许百分比值,HTML5只允许px值。 (常见的陷阱:不应该写“px”)

如果你想显示这些尺寸的图像,完成工作。 否则,您还必须添加CSS来指定显示大小。

当然,最好是以显示的尺寸提供图像,以避免浏览器resize,节省带宽等,但这并不总是可能的。

另请参阅这个问题的答案: HTML和CSS的宽度属性有什么区别?