这一章我们思考一下图片的大小问题,比如啊,你看网站这个头图,它多大合适呢?毕竟我们的显示器有宽有窄,这要多大的图才合适呢?

超级带鱼屏,随便横向两三千像素的宽度,结果图片不够宽,这就难受。好的,图片够大了,到了手机里,横向逻辑像素数也就几百,就看到窄窄的一条条……因为设备的差异化,我们需要同时应对许多种情况,这个很难受。不过我们可以试试百分比,因为“比”就需要一个被比的对象,也就是把尺寸和其他元素绑定了。试试吧:


<div id="header"></div>

#header {
  width: 100%;
  height: 100px;
  background-image: url("/images/header.jpg");
  background-size: 100% auto;
}

这不效果很好么?但是如果是在移动设备下就比较麻烦了,因为这个元素的宽高比会发生变化。在电脑上,把浏览器窗口调整的很窄,你就会看到问题了。

这时候的问题是,以宽度或者高度进行百分比都不合适,又无法两个都设置为百分比,因为不希望图片比例失调。就很气!

好在现在我们可以设置为 cover,就是首先图片要把这个元素完全覆盖,然后图片又要尽可能多的显示出来,当然图片比例也要保持。


<div id="header"></div>

#header {
  width: 100%;
  height: 100px;
  background-image: url("/images/header.jpg");
  background-size: cover;
}

现在调整浏览器窗口,就会发现不再有背景被平铺的现象了。着很美好,但是总觉得……哪里不太对的样子。嗯,因为有些情况下,图片无法被完全显示出来,而图片和元素又是左上角对齐,可我们潜意识里期望的是中心对齐,这就很难受。所以我们要增加一个对背景位置的设定:


<div id="header"></div>

#header {
  width: 100%;
  height: 100px;
  background-image: url("/images/header.jpg");
  background-size: cover;
  background-position: center center;
}

这次在各种情况下显示的都比较好看了。

你看,我们遇到问题,就这样一个点一个点去解决,并不觉得复杂。而到最后的综合效果还是很让我们有成就感的。如果我们可以合理的细分问题到一个个细节,然后逐个解决,代码就一点也不难了。

然后我们再说另外一个情况。商品图,额,我的意思是在某些商品列表里展示的商品图片,可能商家上传的图片大小不一,比例不同,但是你都要放进相同尺寸的元素里进行展示,这时候就不适合上面的方式,因为图片可以不填满元素,但是不能进行裁切。万一切掉了重点就不好玩了。

所以此时,我们要把 background-size 的值设置为 contain,就是保证比例的同时,在元素内尽可能大的显示。因为代码和上面很像,我就不再演示了,大家动手试一试吧。

不过既然这个背景可能无法填满元素,那我们就要注意设置一下,禁用背景重复了哦~

最后,其实商品图一般会直接用图片元素(img),特殊情况才采用背景图片,这里只是举例来学习相关属性的应用。

这两章都是通过假设场景来练习学到的属性,大家也要学着自己给自己提出这种小问题,然后尝试使用已经学到的理论去解决问题。只有能够解决问题的技能,才是你学会了的技能。

【本章助记卡片:卡片 for 第五十三章