background中的cover与contain的区别

background中的cover与contain的区别

• contain：将图片缩放至宽度或者高度能够完全适应容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则容器会留白，不会出现图片的裁剪。例如，对于一个宽度为200px、高度为200px的容器，背景图片使用background-size: contain，并且图片的宽度为300px，高度为150px，则图片会被等比例缩放至宽度为200px，高度为100px，留下50px的空白区域。
• cover：将图片缩放至能够铺满整个容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则图片多余的部分会被裁剪。例如，对于一个宽度为200px、高度为200px的容器，背景图片使用background-size: cover，并且图片的宽度为300px，高度为150px，则图片会被等比例缩放至宽度为400px，高度为200px，并且裁剪掉多余的部分。