問題圖示
變形的圖片
變形的圖片
正常的圖片
正常的圖片
解決方案
方案1：用 div 標(biāo)簽包裹 img 標(biāo)簽
用div標(biāo)簽包裹圖片恰矩，這種方案比較通用距误。
缺點：產(chǎn)生無用標(biāo)簽爱沟。
方案2：flex-shrink: 0
給 img 設(shè)置 flex-shrink: 0;
flex-shrink 的默認(rèn)值為1梭依，如果沒有顯示定義該屬性，將會自動按照默認(rèn)值1在所有因子相加之后計算比率來進行空間收縮鸣奔。設(shè)置為0表示不收縮墨技。
flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值挎狸。
缺點：僅兼容IE11扣汪。如果元素不是彈性盒對象的元素，則 flex-shrink 屬性不起作用伟叛。
方案3：img 設(shè)置 height: 100%
在父元素沒有設(shè)置高度的情況下私痹，給圖片設(shè)置 height: 100%;
看完文章還有福利拿，往下看??????
小伙伴可以在公號【grain先森】后臺回復(fù)【190301】獲取130套簡歷模板统刮。后期小編會建微信群和大家交流分享紊遵，期待你們哦！
