經常有這樣一個場景，需要讓圖片自適應容器的大小。
1、img標簽的方式
我們馬上就能想到，把width、height 設置為100%啊。來看一哈效果。
| <div class='div1'> <img src="./peiqi.png" alt=""></div> |
| .div1 { width:500px; height:400px; border:1px solid black;}.div1 img { /* width: 100%; height:100%; */} |
這是正常的佩琪（如果圖片比容器大的話，圖片會超出容器）
| .div1 { width:500px; height:400px; border:1px solid black;}.div1 img { width: 100%; height:100%;} |
這是100%的佩琪
額，好像剛過完年。
雖然符合了自適應的要求，但是如圖所見圖片失真了。這種圖片比容器小的情況強行將圖片自適應的話圖片就失真。如果說是單個圖片（logo、占位圖、等）按設計稿開發就可以了。但經常會遇到接口獲取的不規則圖片的情況，一般這種時候會將小于容器的話將其水平、垂直居中。
整理一下任務：
| <div class='div1'> <img src="./peiqi.png" alt=""> </div> <div class='div1'> <img src="./peiqi2.png" alt=""> </div> <div class='div1'> <img src="./peiqi4.jpeg" alt=""> </div> |
| .div1 { width:500px; height:400px; border:1px solid black; display: table-cell; vertical-align: middle; } .div1 img { max-width: 100%; max-height: 100%; display: block; margin: auto; } |
max-height 這個屬性會阻止 height 屬性的設置值變得比 max-height 更大。
max-height 屬性用來設置給定元素的最大高度. 如果height 屬性設置的高度比該屬性設置的高度還大,則height 屬性會失效.
這種效果就舒服多了
2、背景圖的方式
| .div { background-size: contain; } |
background-size: contain; 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
新聞熱點
疑難解答
