經(jīng)常有這樣一個場景，需要讓圖片自適應(yīng)容器的大小。
1、img標簽的方式
我們馬上就能想到，把width、height 設(shè)置為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%的佩琪
額，好像剛過完年。
雖然符合了自適應(yīng)的要求，但是如圖所見圖片失真了。這種圖片比容器小的情況強行將圖片自適應(yīng)的話圖片就失真。如果說是單個圖片（logo、占位圖、等）按設(shè)計稿開發(fā)就可以了。但經(jīng)常會遇到接口獲取的不規(guī)則圖片的情況，一般這種時候會將小于容器的話將其水平、垂直居中。
整理一下任務(wù)：
<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 屬性的設(shè)置值變得比 max-height 更大。
max-height 屬性用來設(shè)置給定元素的最大高度. 如果height 屬性設(shè)置的高度比該屬性設(shè)置的高度還大,則height 屬性會失效.
這種效果就舒服多了
2、背景圖的方式
.div { background-size: contain; }background-size: contain; 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。利用css的 background-size: contain; 屬性就能進一步優(yōu)化圖片的寬高都小于容器的情況了。
上代碼
div { height: 400px; width: 500px; border: 1px solid black; background-repeat: no-repeat; background-size: contain; background-position: center; } .div1 { background-image: url(./peiqi1.png); } .div2 { background-image: url(./peiqi2.png); } .div3 { background-image: url(./peiqi4.jpeg); }<div class='div1'></div> <div class='div2'></div> <div class='div3'></div>
當然最后還得看需求，產(chǎn)品是咋要求的。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
