img标签的widthheight属性中定义图像大小是更好的编码实践吗?

<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="" />

推荐答案

在这里,我要反其道而行之,声明将内容与布局分开的原则(这将证明建议使用CSS的答案是合理的)并不总是适用于图像的高度和宽度.

每个图像都具有可以从图像数据导出的固有原始高度和宽度.在内容与布局的框架中,我认为派生的高度和宽度信息是内容,而不是布局,因此应该作为元素属性呈现为HTML.

这很像alt个文字,也可以说是从图像衍生出来的.这也支持任意用户代理(例如,语音浏览器)应该具有该信息以便将其与用户相关联的 idea .至少,纵横比可以证明是有用的("图像的宽度为15,高度为200").这样的用户代理不一定会处理任何CSS.

规范说,widthheight属性还可以用来覆盖实际图像文件中传达的高度和宽度.我不是建议他们用来做这件事.要覆盖高度和宽度,我认为CSS(内联、嵌入或外部)是最好的方法.

因此,根据您想要执行的操作,您可以指定其中一个和/或另一个.我认为理想情况下,原始高度和宽度应该始终指定为HTML元素属性,而样式信息应该有 Select 地在CSS中传达.

Html相关问答推荐

NG8004:找不到名为""的管道.'' [插件Angular 编译器]

如何增加行背景的宽度而不影响上面的内容?""' HTML CSS

D3.js—分组条形图—更新输入数据时出错

窗口对象中是否有对<;html&>根元素的引用?

垂直页眉,每行只显示一个使用css的字母

如何在html和css中创建动态调整大小的表元素

创建带有弯曲边框的水平时间线

在CSS中旋转排除的蒙版图像

如果浏览器通过http接收html,为什么客户端内置表单验证不起作用?

水平卷轴的内容保持堆叠

在弹性框布局中的第n个元素后强制换行

渐变进度条位置

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

带下划线的文本应该有延长的下划线,以使其图像悬停

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

样式化单选按钮 背景 colored颜色

如何将一个边框向下移动

拨动switch 在重新加载时未重置

W3Schools 幻灯片相同高度

动态使用时波浪号不转换为绝对路径