在網頁端，我們經常想讓圖片能夠自適應拉伸縮放，使之可以完美的嵌入我們給定的容器里，比如div,button,input，下面我將用代碼來說明如何實現這個功能！
一、div背景圖自適應
如果知道圖片都有自身的大小尺寸，那我們如何把一張圖片自適應縮放到一個給定大小的div里呢？這里只要用到background-size屬性就可以了！
實例一：
代碼用的原圖大小為：159*113
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sdds</title> <style> .bg0 { width: 318px; height: 113px;/* 設置的div框的寬高*/ background: url(img/demo.jpg) no-repeat; background-color: green; /* 加在url(img/demo.jpg)后面，這個顏色才有效，加在前面設置這個顏色屬性無效*/ } /* 圖片自適應大小 */ .bg1 { width: 500px; height: 300px; /* 設置的div框的寬高*/ background: url(img/demo.jpg) no-repeat; /* 以父元素的百分比來設置背景圖像的寬度和高度。*/ background-size: 100% 100%; } </style> </head> <body> <div class="bg0"></div> <div class="bg1"></div> </body> </html>
運行結果：
實例二：
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sdds</title> <style> .bg0{ width: 159px; height: 113px; background: url(img/demo.jpg) no-repeat; } /* 圖片自適應大小 */ .bg1 { width: 500px; height: 300px; /* 設置的div框的寬高*/ background: url(img/demo.jpg) no-repeat; /* 以父元素的百分比來設置背景圖像的寬度和高度。*/ background-size: 100% 100%; } </style> </head> <body> <div class="bg0"></div> <div style="width: 800px; height: 600px; background-color: red;"> <div class="bg1"></div> </div> </body> </html>
運行結果：
注：為了使圖片自適應div大小，我們設置了 background-size: 100% 100%; background-size屬性是以父元素的百分比來設置背景圖像的寬度和高度。注意，由實例二可知，這里的父元素並不是背景色為紅色的div，而是類名為bg1的div。類名為bg1的div才是設置的背景圖片的父元素，我的理解是先設置了一個類名為bg1的div，然后再在這個div上嵌入了背景圖像子元素。所以，類名為bg1的div是設置的背景圖片的父元素。
二、button背景圖自適應
button按鈕可分為兩種，一種是直接button標簽的按鈕，一種是button類型的input標簽，兩者差別不大，具體差別可自己網上查詢。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>演示</title> </head> <body> <!-- 原圖 --> <img src="img/qt_img/SA_4.png" /> <!-- button背景圖 --> <button style="width: 300px; height: 100px; background: url(img/qt_img/SA_4.png); background-size: 100% 100%;"></button> <!-- input button類型背景圖 --> <input type="button" style="width: 300px; height: 200px; background: url(img/qt_img/SA_4.png); background-size: 100% 100%;" /> </body> </html>
運行結果：
