background中的cover與contain的區別
contain:將圖片縮放至寬度或者高度能夠完全適應容器,并且保持圖片寬高比不變,如果容器寬高比與圖片寬高比不同,則容器會留白,不會出現圖片的裁剪,例如,對于一個寬度為200px、高度為200px的容器,背景圖片使用background-size: contain,并且圖片的寬度為300px,高度為150px,則圖片會被等比例縮放至寬度為200px,高度為100px,留下50px的空白區域,cover:將圖片縮放至能夠鋪滿整個容器,并且保持圖片寬高比不變,如果容器寬高比與圖片寬高比不同,則圖片多余的部分會被裁剪,例如,對于一個寬度為200px、高度為200px的容器,背景圖片使用background-size: cover,并且圖片的寬度為300px,高度為150px,則圖片會被等比例縮放至寬度為400px,高度為200px,并且裁剪掉多余的部分,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/548855.html
標籤:其他
