CSS3提供了很多新的屬性來對圖片進行縮放和裁切,以下是一些值得注意的屬性。
img { max-width: 100%; height: auto; }
其中,max-width屬性可以讓圖片在其所在容器內的寬度不超過父元素的寬度,而height屬性可以保持圖片的高度與寬度的比例不變。
img { object-fit: cover; height: 200px; width: 300px; }
這里使用了object-fit屬性,它可以控制圖片的填充方式。cover表示讓圖片覆蓋整個容器,裁切掉多余的部分。height和width屬性分別控制了圖片所在容器的高度和寬度。
div { width: 200px; height: 200px; } div img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; }
這里通過絕對定位將圖片放在一個大小為200x200的div容器內,并使用object-fit屬性控制填充方式。由于圖片被絕對定位,所以需要設置top和left屬性來將圖片定位在div容器的左上角。
以上是CSS3圖片縮放和裁切的一些常用屬性,我們可以根據實際需求靈活使用。
下一篇css3圖片的輪播