2013-08-30 37 views
2

关于这篇文章:http://webdesign.about.com/cs/graphics/qt/tipimgrealsize.htm“必须”在img标签上写宽度和高度?

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

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

width: 100%; height: auto 

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

+0

在我看来,你问的是错误的问题。你问过“是必要的吗?”当你通过不做X来观察缺点时,询问你如何解决X的实现问题会更有益。通过询问“X是必要的吗?”,你所得到的仅仅是那些不认同的答案解决您想要解决的实际问题。 – cimmanon

回答

-2

不是必须的。而且,正如你自己所解释的,不适合响应式页面。浏览器确实利用了宽度/高度,所以出现了性能低下的情况,但为了响应速度,它通常是值得的。

+1

任何人在不知道“回应”的真正含义的情况下阅读你的答案是非常具有讽刺意味的。 – BoltClock

+0

@BoltClock你能解释一下吗? – Cruncher

+1

@Cruncher:这是一个笑话(我会承认一个非常蹩脚的笑话)。在[原始RWD书写](http://alistapart.com/article/responsive-web-design)之前,“响应”通常意味着UI响应,这意味着它是与性能相关的术语。现在,只有在网页设计中,“响应性”意味着完全不同于性能的东西。这里的答案是为了“响应性”而牺牲性能,这对于外行人来说是没有意义的。 – BoltClock

0

我会在桌面视图的元素上指定它,但对于响应式视图,请使用您建议的代码覆盖它。另外请确保你把display: block放在那里。这可以帮助IE浏览器,当你正在做这个响应缩小;)

宽度/高度属性帮助的原因是这意味着浏览器可以在图像加载之前铺设页面,否则你会得到'跳跃'的效果。

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

0

为什么说你应该给图像的高度/宽度的原因是,浏览器渲染图像之前的高度/宽度,以便在加载图像之前在网站上保留空的容器...所以网站的结构在加载网站时不会打扰。

好吧。当我使用通过媒体查询创建响应式布局时,我使用相同的技术。但根据我的经验,对于较小的设备来说,通过CSS为较小的设备重新调整大小不太明智。所以,我使用重新缩小的较小版本的图像以适合较小的设备以进行快速加载......所以它使网站相对快速地加载。

您可以使用其他技术来优化图像的网络通过像Photoshop这样的工具,这将提高速度也图像的大小将由此下降很多。

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

祝你好运!

相关问题