在網站設計中,圖片縮放是必不可少的一種技術。CSS提供了多種方式實現圖片縮放,以下是幾個常用的代碼示例。
/*1. 通過指定width或height屬性縮放圖片*/ img { width: 50%; /*縮放為原來的一半*/ } img { height: 150px; /*按指定高度縮放*/ } /*2. 通過設置max-width或max-height屬性使圖片寬高自適應*/ img { max-width: 100%; /*寬度不超過父容器*/ height: auto; /*高度自適應*/ } img { max-height: 300px; /*高度不超過300px*/ width: auto; /*寬度自適應*/ } /*3. 使用background屬性和background-size屬性實現背景圖片縮放*/ div { background-image: url('img/bg.jpg'); background-size: cover; /*按比例縮放,保證完全覆蓋容器*/ } div { background-image: url('img/bg.jpg'); background-size: contain; /*縮放至短邊貼合容器邊緣,長邊留白*/ } /*4. 使用transform屬性實現CSS3圖片縮放*/ img { -webkit-transform: scale(0.5); /*縮放為原來的一半*/ transform: scale(0.5); } img { -webkit-transform: scale(1.5); /*放大1.5倍*/ transform: scale(1.5); }
以上就是幾種常用的CSS圖片縮放技術,不同的應用場景需要采用不同的方法。希望本文能夠幫助到大家。
下一篇python的題試講