由於服務器的圖片大小參差不齊,想要最符合的尺寸很難做到。
如何讓圖片大小自動適應:
a場景: div 包着 img
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
b場景: 背景圖片
style="background-image: url(${user.headimgurl});background-size: cover; "
如果你用了背景圖片的方式:下面是background-size 的各個屬性
| length | 設置背景圖像的高度和寬度。 第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度,第二個值設置高度。 如果只設置一個值,則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。 背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。 |
