在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="" />
G-W*_*Wiz 87
我将在这里反对谷物,并指出将内容与布局分离的原则(这可以证明使用CSS的答案是合理的)并不总是适用于图像的高度和宽度.
每个图像都具有固有的原始高度和宽度,可以从图像数据中获得.在内容与布局的框架中,我会说这个派生的高度和宽度信息是内容,而不是布局,因此应该作为元素属性呈现为HTML.
这很像alt文本,也可以说是从图像中得到的.这也支持任意用户代理(例如语音浏览器)应该具有该信息以便将其与用户相关联的想法.至少,纵横比可能证明是有用的("图像宽度为15,高度为200").这样的用户代理不一定会处理任何CSS.
规范说,width和height属性也可以用来覆盖实际图像文件中传达的高度和宽度.我不是建议将它们用于此.要覆盖高度和宽度,我相信CSS(内联,嵌入或外部)是最好的方法.
因此,根据您的要求,您可以指定一个和/或另一个.理想情况下,原始高度和宽度始终指定为HTML元素属性,而样式信息应该可选地在CSS中传达.
Bri*_*kau 39
在标签中定义高度/宽度的历史原因是,<img>即使在加载CSS和/或图像资源之前,浏览器也可以调整页面中的实际元素.如果您没有显式提供高度和宽度,则<img>元素将呈现为0x0,直到浏览器可以根据文件调整大小.发生这种情况时,一旦图像加载,就会导致页面的视觉重排,如果页面上有多个图像,则会复合.调整<img>via高度/宽度可在页面流中以正确的大小创建物理占位符,从而使您的内容可以异步加载,而不会中断用户体验.
或者,如果您正在进行移动响应式设计,这是目前最好的做法,那么仅指定宽度(或最大宽度)并将高度定义为非常常见auto.这样,当您为不同的屏幕宽度定义媒体查询(例如CSS)时,您可以简单地调整图像宽度,让浏览器处理保持图像高度/宽高比正确.这是一种中间立场方法,因为您可能会获得一些回流,但它允许您支持多种屏幕尺寸,因此效益通常超过负面.
最后,有时您可能不会提前知道图像大小(图像src可能是动态加载的,或者可以通过脚本在页面的生命周期内更改),在这种情况下使用CSS才有意义.
最重要的是,您需要了解权衡取舍并确定哪种策略对您要实现的目标最有意义.
Jim*_*eaf 11
虽然可以使用内联样式,但最好通过在页面上包含外部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;
}
如果你想使用内联样式,为了便于阅读,最好使用style属性设置宽度和高度.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
在图像标签中指定宽度和高度是一种很好的做法.这种方式当页面加载时,为图像分配了空间,即使图像需要很长时间加载,布局也不会受到任何干扰.
绝对不是两者兼而有之.除此之外,我不得不说这是个人偏好.如果我有许多相同大小的图像来减少代码,我会使用CSS.
.my_images img {width: 20px; height:20px}
从长远来看,由于HTML属性的弃用,CSS可能会胜出,更可能是由于像SVG这样的矢量图像格式的增长,使用非像素的单位(如%或em)来缩放图像实际上是有意义的.