1.行動(dòng)端怎麼樣讓圖片寬高比例剛好適應(yīng)手機(jī)目前螢?zāi)蝗災(zāi)淮笮。?
當(dāng)寬度100%時(shí)高度就需要自適應(yīng)，當(dāng)高度100%時(shí)寬度就需要自適應(yīng)，
這樣就可能圖片超出目前畫面出現(xiàn)捲軸，需要滑動(dòng)才能看到，或者就會(huì)出現(xiàn)留白，沒(méi)有充滿整幕。
因?yàn)槟壳皥D片不是同種顏色背景，無(wú)法透過(guò)填滿背景來(lái)實(shí)現(xiàn)，有沒(méi)有好的圖片尺寸比例可以實(shí)現(xiàn)這種需求。
2.程式碼
.imgsrc img {
width: 100%;
}3.效果
5
0
0
根據(jù)需求來(lái)看，建議透過(guò)css的背景屬性來(lái)設(shè)定；
第一步，先加入一個(gè)螢?zāi)淮笮〉腄OM元素；
或直接在你的imgsrc上設(shè)置，前提是imgsrc的大小是螢?zāi)淮笮。?br>第二步：設(shè)定元素的css屬性：
一樓說(shuō)的是下面這種，不會(huì)拉伸圖片；
透過(guò)調(diào)整background-position這個(gè)屬性來(lái)控制圖片位置，我也推薦這種寫法：
background-image: url('鏈接');
background-size: cover;
background-repeat: no-repeat;
background-position: center;下面這種可以將圖片完全展示出來(lái)，但會(huì)將拉伸背景圖片，如果沒(méi)有鎖定螢?zāi)唬瑱M屏?xí)r圖片會(huì)被拉伸的比較嚴(yán)重：
background-image: url('鏈接');
background-size: 100% 100%;===============================================
既不拉伸圖片又要完全展示，真是執(zhí)著於這個(gè)的話，給設(shè)計(jì)提個(gè)參考方案吧：
把圖片的輪廓羽化後，加個(gè)背景色，再去拿到圖片背景色的色值，在imgsrc或是加上的DOM元素中，設(shè)定css屬性：
background-color: white;// 拿到的圖片背景色
background-image: url('鏈接');
background-size: 95%; //可以寫成固定值
background-repeat: no-repeat;
background-position: center;很多種方式可以實(shí)現(xiàn)。除去 js 計(jì)算不說(shuō)， <img> 標(biāo)簽可以用比較新的 object-fit: cover; 屬性。
或把圖片放到背景裡，再利用 background-size: cover; ，這種方式還可以通過(guò)百分比的 background-position 指定焦點(diǎn)，可以保持焦點(diǎn)的地方一直可見(jiàn)。
