css圖片等比例顯示具體程式碼範例如下：
<!DOCTYPE HTML><html lang="en"><head> <title>css圖片等比例顯示程式碼範例</title> <meta charset="UTF-8"> <style type="text/css"> .demo1-1 { float: left; width: 200px; height: 200px; overflow: hidden; } .zoomImage { width: 100%; height: 0; padding-top: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } </style></head><body><div class="demo1-1"> <div class="zoomImage" style="background-image: url(2.png)"></div></div></body></html>
效果如：
註：background-size 屬性規定背景映像的尺寸。
可能值：
1、length
設定背景映像的高度和寬度。第一個值設定寬度，第二個值設定高度。如果只設定一個值，則第二個值會被設定為 "auto"。
2、percentage
以父元素的百分比來設定背景映像的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只設定一個值，則第二個值會被設定為 "auto"。
3、cover
把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區。背景映像的某些部分也許無法顯示在背景定位地區中。
4、contain
把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
