创建响应式图像的最简单方法是什么？

问题描述：

我正在处理我的第一个响应式网站，我想知道如何动态调整所有图像的大小。我现在已经解决了这个问题，但我真的很想重新考虑我是如何做到这一点的。有没有一个jquery插件为此很容易实现（我不知道js很多）？有没有更好的办法？创建响应式图像的最简单方法是什么？

My site

这里的时候，看到你们的脸是一个解决方案，在我看来，这样做非常好。也许你可以检查他的来源。此外，我会说这是一个更有效和优雅的方式来完成这个没有js。 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html – Sprottenwels 2012-07-08 21:10:31

这是目前在网页设计/开发社区一个很大的话题。 – Pointy 2012-07-08 21:14:18

这看起来像他只是把'img：max-width：100％;'然后包括一个叫做imgsizer的js来适应ie。 – imakeitpretty 2012-07-08 21:51:03

答

你其实并不需要这方面的任何JS - 这可能是与单独的CSS来实现。正如您在查看注释中链接的源代码时发现的那样，动态调整图像大小所需的全部内容是max-width属性设置为100%。但是，如果您希望图像动态增大，则必须使用width:100%。

请参阅本jsFiddle的例子。你会发现max-width不走过去的图像的分辨率 - 在otherhand width保证了图像填充容器（其中一些人认为是一个缺点，当宽度超过它的原始，因为他们失去了分辨率）。

有一个catch虽然，max-width属性不支持IE6或以下 - 这是只有在IE7推出。这篇文章here提供了一个解决方法，虽然。

答

但是通过CSS调整图像大小不会使图像响应。

A 200 kb的图像将是200 kb的，当它是1000像素宽而且当它是由CSS大小调整为50像素宽。

我想等待，直到大型图片加载智能手机

那么......你有更好的主意吗？ – imakeitpretty 2012-07-29 16:53:46

创建响应式图像的最简单方法是什么？

相关推荐