背景图片在网页中被广泛使用，但是有一个问题。它的大小没有控制好。背景图片一旦超出容器的界限，就会被直接截取，看起来怪怪的。
在实际操作中，设计师给你的图片难免会有一些错误，但是你的图片不可能这样显示，更不可能自己手动修改图片，所以必须要用一种方法让图片自动适应容器。
问题本质上是每一张大小不同的图片都能适应同一个容器的大小。
语法
控制背景图片大小
背景-大小:类型；
(1)汽车
这是默认值，意味着不使用该属性。多余的部分直接切掉。
核心代码：background-size: auto;
核心代码:背景-大小:自动；
核心代码：background-size: auto
核心代码:背景尺寸:自动
多余部分被切除。
(2)数值
可以用px或者%。设置一个会影响宽度，设置第二个会影响高度。
如果只设置了一个宽度，将自动设置第二个高度，与宽度保持相同的比例。
核心代码：background-size: 600px;
核心代码:背景-大小:600px
核心代码：background-size: 600px;
核心代码:背景-大小:600px
完成，但空不在以下范围内
当然，将两者都设置为100%更方便，这样会直接填充容器，但会失真。
核心代码：background-size: 100% 100%;
核心代码:背景尺寸:100% 100%；
核心代码：background-size: 100% 100%;
核心代码:背景尺寸:100% 100%；
虽然也能盖住集装箱，但已经变相扭曲了。
(3)遏制
官方的解释是，图片是根据背景的最短边放大或缩小的。其实你只要记住图片会完整的显示在容器里不失真就行了。
但这可能会导致容器中出现空的地方，因为图片应该在容器中以错误的大小等比例显示，不会失真。
核心代码：background-size: contain;
核心代码:背景-大小:包含；
核心代码:背景-大小:包含；
这幅图片原本是竖着长方形，而容器是横着长方形，并且图片实际尺寸是要比容器大得多，但使用了contain，也能在不失真的情况下，完整的展示在不合尺寸的容器里。
这张图片本来是一个垂直的长方形，而容器是一个水平的长方形，图片的实际尺寸比容器大很多。然而，使用contain，它可以在超出尺寸的容器中完整地显示，而不会失真。
它可以在容器中完整显示，不会变形。
(4)封面(常用)
官方的解释是，图片是根据背景的最长边放大或缩小的。其实你只要记住图片会按容器大小等比例盖住容器，避免空白的地方，但是会剪掉一点多余的。
核心代码：background-size: cover;
核心代码:背景-尺寸:封面；
核心代码:背景-尺寸:封面；
实际上图片尺寸是比容器大得多，但使用cover就可以让图片尺寸同步容器，超出的部分在裁掉。
实际上，图片的尺寸比容器的尺寸大得多，但是通过使用盖子，图片的尺寸可以与容器的尺寸同步，超出的部分正在被剪掉。
全盖集装箱
这个是没使用cover属性，就只能看到一部分内容。所以在使用背景图片时，一般都要加上cover属性，好让不同图片能够适用容器，仅仅只是截掉一点点图片而已。
这个没有使用cover属性，所以只能看到部分内容。所以在使用背景图片时，通常会添加cover属性，这样就可以在容器上应用不同的图片，只切掉一点点图片。
背景图片的原始尺寸
知识地图
本文来自一纸枕书投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/628969.html
微信扫一扫 
