当前位置: 首页 > 面试题库 >

是否应该为HTML中的IMG指定高度和宽度属性?

林礼骞
2023-03-14
问题内容

如果我知道要通过图像标签显示的图像的高度和宽度,我应该包括height和width属性,还是仅将信息放入CSS中?或两者?

例如

<img src="profilepic.jpg" height="64" width="64" />

要么

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />

要么

<img src="profilepic.jpg" style="height: 64px; width: 64px;" />

问题答案:

根据Google Page Speed,您应始终在image标签中定义宽度和高度。但是,要验证您不能使用样式标签。

另外,您应始终指定与实际图像相同的高度和宽度,以使浏览器不必像调整大小一样对其进行任何修改。

我建议这样做

<img src="..." height="20" width="50">

编辑: 有人在评论中建议不添加任何属性会更快。根据Google的说法(并非所有浏览器知识的终结)

如果在包含文档中未指定尺寸,或者指定的尺寸与实际图像的尺寸不匹配,则下载图像后,浏览器将需要重排并重新绘制。为防止回流,请在HTML标记或CSS中指定所有图像的宽度和高度。-

鉴于此,您可以在CSS中进行img标注,但要进行验证,必须在CSS文件中进行,而不是内联。

顺便说一句,Google Page Speed是一系列旨在更快地呈现页面的技巧。



 类似资料:
  • 问题内容: 如果我知道要通过图像标签显示的图像的高度和宽度,我应该包括height和width属性,还是仅将信息放入CSS中?或两者? 例如 要么 要么 问题答案: 根据Google Page Speed,您应始终在image标签中定义宽度和高度。但是,要验证您不能使用样式标签。 另外,您应始终指定与实际图像相同的高度和宽度,以使浏览器不必像调整大小一样对其进行任何修改。 我建议这样做 编辑: 有

  • http://exfluor.com/productsMain.html 我似乎无法让可点击链接区域的边界保持在

  • 问题内容: 指定图像高度和宽度的“正确”语义方式是什么?在CSS中… 或内联… ? CSS似乎是放置可视信息的正确位置。另一方面,很少有人会认为不应将图像“ src”指定为属性,并且高度/宽度似乎像“ src”那样与二进制图像数据相关。 (是的,我意识到从技术,最终用户的角度来看,这确实无关紧要。) 问题答案: 应该内联定义。如果使用的是img标签,则该图像应具有内容的语义值,这就是为什么需要al

  • 主要内容:1. width,2. height,3. max-width 和 max-height,4. min-width 和 min-heightCSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。 1. width 通过 width 属性可以设

  • 我有一个字体对象,我需要字体的宽度和高度。我知道getSize()返回字体的高度,因为字体的点号通常是高度,但在确定字体的宽度时,我不知所措。 或者,能够确定字体支持的每个特定字符的宽度也是一个可接受的解决方案。 我的最佳猜测是,宽度是在使用loadFont方法时指定的,但文档没有指定size参数是表示字体的宽度还是高度。 使用的所有字体都是单空格字体,如DejaVu Sans mono、GNU

  • (在stackoverflow上已经提出了类似的问题,但这个问题有更多的限制,例如特定的最大宽度、最大高度、所需的特定高度和宽度,并且没有布局偏移。) 我想要一个具有以下约束的响应图像: 最大宽度:100%,这样它就不会溢出到右侧,并且在减小屏幕宽度时会有响应 如何使用CSS实现这一点? (如果CSS无法实现这一点,那么可能是在JavaScript中?) 我尝试了几个CSS功能,例如对象适合度和最