CSS實現圖片伸縮的方法是通過使用CSS的background-image屬性來實現。首先,將圖片作為背景圖像設置給元素,然后設置背景大小和背景位置來控制圖片的伸縮。
.img-container { background-image: url('圖片地址'); background-size: cover; /* 設置圖片占滿容器 */ background-position: center; /* 設置圖片居中 */ }
在示例代碼中,.img-container元素是一個容器,背景圖像是一個圖片。設置background-size為cover可以讓圖片一直嘗試著填滿容器,而且保持比例不變;設置background-position為center則讓圖片居中顯示。這些屬性的值可以根據需要進行設定,以達到最合適的顯示效果。
CSS的background-image屬性還支持url()屬性值設置外部圖片的地址,同時也可以設置多個背景圖來實現復雜的視覺效果。