圖片正常效果

圖片變形效果

一、flex-shrink: 0

給 img 設(shè)置 flex-shrink: 0;
flex-shrink 的默認(rèn)值為1，如果沒有顯示定義該屬性，將會(huì)自動(dòng)按照默認(rèn)值1在所有因子相加之后計(jì)算比率來進(jìn)行空間收縮。設(shè)置為0表示不收縮。
flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。注意：如果元素不是彈性盒對(duì)象的元素，則 flex-shrink 屬性不起作用。
缺點(diǎn)：僅兼容IE11

二、height: 100%

在父元素沒有設(shè)置高度的情況下，給圖片設(shè)置 height: 100%;

三、外層div標(biāo)簽包裹

用div標(biāo)簽包裹圖片，這種方案比較通用，缺點(diǎn)：產(chǎn)生無用標(biāo)簽。