我正在开发我的第一个响应式网站，我想知道如何使所有图像动态调整大小。我现在已经解决了这个问题，但我真的很想重新考虑我是如何做到这一点的。是否有一个jquery易于实现的插件（我不太了解js）？有没有更好的办法？
问问题
774 次
2 回答
2
您实际上不需要任何 js - 这可以单独使用 CSS 来实现。正如您通过查看评论中链接中的来源发现的那样，动态调整图像大小所需的只是将max-width属性设置为100%. 但是，如果您希望图像的大小也动态增加，那么您必须使用width:100%.
请参阅此jsFiddle中的示例。您会注意到max-width不会超过图像的分辨率 - 另一方面width确保图像填充容器（有些人认为这是一个缺点，因为当宽度超过原始分辨率时它们会失去分辨率）。
但是有一个max-width问题，IE6 或更低版本不支持属性 - 它仅在 IE7 中引入。这篇文章在这里提供了一个解决方法。
于 2012-07-09T18:48:31.257 回答
1
但是通过 css 调整图像大小不会使图像响应。
一个 200 kb 的图像在 1000 px 宽时将是 200 kb，但当它被 css 调整为 50 px 宽时也是如此。
等到智能手机上加载大图像时，我想看看你们的脸
于 2012-07-27T12:56:22.727 回答