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,并且裁剪掉多余的部分。

热门相关:帝少的专属:小甜心,太缠人   网游之逆天飞扬   寂静王冠   天启预报   寂静王冠