2

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

以及我读过的其他文章,在 img 标签中写入宽度和高度是“必须”的。但也许现在这种情况发生了变化,我猜不推荐使用响应式网页设计?

因此,我使用 Twitter Bootstrap 并发现在 img-tags 上使用固定宽度和高度会出现问题。在我的 CSS 中,我使用:

width: 100%; height: auto

然后它会在每台设备上正确缩放。但是,当我不提供图像的宽度和高度值时,加载时间或其他什么明显变慢?此外,是否有另一种方法可以解决这个问题,就像 Twitter Bootstrap 一样?

4

3 回答 3

0

我会在桌面视图的元素上指定它,但对于响应式视图,请使用您建议的代码覆盖。还要确保你穿display: block在那里。当您进行这种响应式收缩时,这有助于 IE ;)

宽度/高度属性帮助的原因是它意味着浏览器可以在图像加载之前布局页面,否则你会得到“跳转”效果。

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

于 2013-08-30T17:59:52.713 回答
0

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

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

您可以使用其他技术通过 Photoshop 等工具优化网络图像,这将提高速度,因为图像大小会因此下降很多。

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

祝你好运!

于 2013-08-30T18:00:06.443 回答
-2

不是必须的。而且,正如您自己所解释的那样,它不适合响应式页面。浏览器确实使用了宽度/高度,因此会影响性能,但出于响应性考虑,通常值得这样做。

于 2013-08-30T17:48:07.550 回答