响应式Web设计：使用HTML5和CSS3实践 （8）

look_w

3.5 弹性图片

现代浏览器下要实现图片随着流动布局相应缩放大小只需要在CSS中做如下声明：

    img {
        max-width: 100%;
    }

也可以把这个技术应用到其他多媒体标签上：

    img,object,video,embed {
        max-width: 100%;
    }

但我们也面临着一个问题，不论多大的视口都要下载同一张图片（当然是一张为了兼容大视口的大图片）未免有些浪费宽带。

让图片随视口缩放

将奥斯卡图像的固定宽高删掉，并设置一个百分比，然后可以拉伸页面试一把效果。

    .oscarMain {
        float: left;
        margin-top: -28px;
        width: 28.9398281%; /* 202 ÷ 698 */
    }

给弹性图片设置阈值

当我们把窗口超过一定分辨率时，图片也被拉拉大了，我们可以追加一个特定样式来为图片设定阈值。

    .oscarMain {
        float: left;
        margin-top: -28px;
        width: 28.9398281%; /* 698 ÷ 202 */
        max-width: 202px;
    }

超级全能的max-width属性

另一种限制页面无限扩展的方法是给最外层的#wrapper增加max-width属性（有使用过Bootstrap的应该不会陌生），如下所示：

    #wrapper {
        margin-right: auto;
        margin-left: auto;
        width: 96%; /* Holding outermost DIV */
        max-width: 1414px;
    }

这意味着也页面会缩放至视的96%，但绝不会超过1414像素宽。