CSS 中的background-size
屬性可以指定背景圖片如何拉伸。其屬性值可以是長度值(如像素)或百分比,也可以是關鍵詞cover
或contain
。
當屬性值為cover
時,背景圖片會被縮放到恰好覆蓋整個背景區域,并且保持圖片原始的寬高比例。
background-size: cover;
當屬性值為contain
時,背景圖片會被縮放以完全裝入背景區域,可能會出現背景區域不完全填充的情況。
background-size: contain;
如果需要指定具體的長度值或百分比,可以用以下語法:
background-size: 寬度 高度; background-size: 寬度%; background-size: auto 高度;
如果指定的寬高比例與圖片原始的寬高比例不一致,那么圖片會被強制拉伸到指定的寬高比例。
例如,下面的 CSS 規則會把背景圖片設置為恰好覆蓋整個背景區域,并且保持寬高比例為 16:9:
background-image: url("image.jpg"); background-size: 100% 56.25%;
上一篇ajax如何向前臺傳對象
下一篇css如何讓圖片靠左