揭秘CSS(第 1 版)
9.4.3 弹性图片
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

多列布局

弹性布局盒模型

响应式布局

弹性网格

媒体查询

弹性图片

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

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

img {
    max-width: 100%;
}

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

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

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

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

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

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

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

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

<header></header>

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

@media screen and (min-width: 480px) {
    header {
        background: url(logo_480.png) no-repeat;
    }
}
@media screen and (min-width: 800px) {
    header {
        background: url(logo_800.png) no-repeat;
    }
}

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验