这一章我们思考一下图片的大小问题，比如啊，你看网站这个头图，它多大合适呢？毕竟我们的显示器有宽有窄，这要多大的图才合适呢？
超级带鱼屏，随便横向两三千像素的宽度，结果图片不够宽，这就难受。好的，图片够大了，到了手机里，横向逻辑像素数也就几百，就看到窄窄的一条条……因为设备的差异化，我们需要同时应对许多种情况，这个很难受。不过我们可以试试百分比，因为“比”就需要一个被比的对象，也就是把尺寸和其他元素绑定了。试试吧：
<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），特殊情况才采用背景图片，这里只是举例来学习相关属性的应用。
这两章都是通过假设场景来练习学到的属性，大家也要学着自己给自己提出这种小问题，然后尝试使用已经学到的理论去解决问题。只有能够解决问题的技能，才是你学会了的技能。
暂无评论内容