前端頁面圖片大小自動適應


由於服務器的圖片大小參差不齊,想要最符合的尺寸很難做到。

 

如何讓圖片大小自動適應:

 

 

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 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM