我的位置: 首页  >   揭秘CSS  >   9.4.3 弹性图片

9.4.3 弹性图片

编辑:比特教程网    时间:2018-10-13 02:58    


默认情况下,图像的显示尺寸是 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;
 }
}



上一节:9.4.2 弹性网格

下一节:9.4.4 兼容老IE