电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（8） [打印本页]

作者: look_w 时间: 2019-2-18 19:08 标题: 响应式Web设计：使用HTML5和CSS3实践（8）

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像素宽。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)