在img标签上写“宽度和高度”的“必须”?

时间:2013-08-30 17:37:16

标签: html css twitter-bootstrap responsive-design

关于这篇文章:http://webdesign.about.com/cs/graphics/qt/tipimgrealsize.htm

和我读过的其他文章是“必须”在img标签中写出宽度和高度。但是现在可能会发生变化,我认为响应式WebDesign已被弃用了吗?

所以,我正在使用Twitter Bootstrap,并在img-tags上发现使用固定宽度和高度的麻烦。在我的CSS中,我使用:

width: 100%; height: auto

然后它在每个设备上正确缩放。但是当我没有提供图像的宽度和高度值时,是加载时间还是显着慢的?此外,还有另一种解决方法,就像Twitter Bootstrap一样吗?

3 个答案:

答案 0 :(得分:0)

我在桌面视图的元素上指定它,但是响应式视图会覆盖您建议的代码。还要确保将display: block放在那里。当你做这种响应性缩小时,这可以帮助IE;)

宽度/高度属性有用的原因是它意味着浏览器可以在图像加载之前将页面放置,否则会产生“跳跃”效果。

必须将图片大小调整为显示它们的最大尺寸。您的用户没有理由为浏览器下载额外的字节来调整图像大小。

答案 1 :(得分:0)

之所以说你应该给出图像高度/宽度是因为;浏览器在图像之前渲染高度/宽度,因此在加载图像之前在网站上保留一个空置容器...因此网站的结构在加载网站时不会受到干扰。

好。当我用来通过媒体查询创建响应式布局时,我使用相同的技术。但是对于较小的设备,根据我的经验,为较小的设备重新调整(通过CSS)相同的大图像是不明智的。因此,对于较小的设备,我使用重新调整大小的较小版本的图像以实现快速加载......因此,相对加载网站的速度非常快。

通过像Photoshop这样的工具可以用来优化网络图像的其他技术,这也可以提高速度,因为图像尺寸会因此而下降很多。

最后但并非最不优化您的代码以及删除不必要的标签&的CSS。

祝你好运!

答案 2 :(得分:-2)

不是必须的。并且,正如您自己解释的那样,不适合响应式页面。浏览器确实利用了宽度/高度,因此性能受到了影响,但为了响应性,它通常是值得的。