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