CSS3 响应式布局之响应式图片

默认情况下，图像的显示尺寸是 HTML 中指定的 width 和 height 属性值。如果不指定这些属性值，图像就会按原始尺寸显示。当然，还可以在 CSS 中以像素为单位，设置图像的 width 和 height。

在现代浏览器中（包括IE7+）中，只需将图像的 max-width 属性设置为百分数，就可以让图像随着弹性网格自动缩放。如：

1. img {
2.     max-width: 100%;
3. }

这样，如果图片的宽度超过容器的宽度，就自动缩小，而不会撑破容器；如果图片的宽度小于容器的宽度，就按原始尺寸显示。这种机制可以确保图片能够适应各种尺寸的网格，而不会破坏布局。

更进一步，还可以将同样的样式应用到其他多媒体元素，这些多媒体元素就可以适应各种网格尺寸了。如：

1. img, object, video, embed {
2.     max-width: 100%;
3. }

这样一来，图像和多媒体元素都能在，父元素的内容区域内自由缩放。不过，需要注意的是，使用这种方法时，一定要使用 max-width 属性，而不是 width 属性。

这种方法可以解决现实的问题，但它又会带来新的问题：第一，需要提前准备一张超大的图片，以备大视口使用。第二，无论什么设备，无论视口多大，都会下载超大图片，这不但浪费手机流量、造成没有必要的存储空间消耗，还会影响网站载入速度，并且在小屏幕下图片很不清晰。

如果不同尺寸的设备使用同一张大的图片，不但浪费手机流量、造成没有必要的存储空间消耗，还会影响网站载入速度，并且在小屏幕下图片很不清晰，显然不合适。

如果能为不同尺寸的设备提供不同尺寸的图片，问题便迎刃而解。一种解决方案是不直接使用 img 元素，而是为父元素添加背景图片，再使用媒体查询，让不同尺寸的设备加载不同尺寸的背景图片。

看一个简单的例子，假设在网站头部要包含一个 logo，只需定义一个空的 header 元素，而不定义 img 元素。如：

就可以通过媒体查询，对不同尺寸的设备，使用不同尺寸的 logo 图像作为 header 元素的背景图片。如：

1. @media screen and (min-width: 480px) {
2.     header {
3.      background: url(logo_480.png) no-repeat;
4. }
5. }
6. @media screen and (min-width: 800px) {
7.     header {
8.      background: url(logo_800.png) no-repeat;
9. }
10. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。