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，並且裁剪掉多餘的部分。