# flex布局下img圖片變形的解決方法 # flex布局下img圖片變形的解決方法 0.4522018.08.10 22:31:46字數 215閱讀 15,570  圖片正常效果  圖片變形效果 ## 一、flex-shrink: 0 給 img 設置`flex-shrink: 0;` flex-shrink 的默認值為1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之后計算比率來進行空間收縮。設置為0表示不收縮。 flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。注意：如果元素不是彈性盒對象的元素，則 flex-shrink 屬性不起作用。 缺點：僅兼容IE11 ## 二、height: 100% 在父元素沒有設置高度的情況下，給圖片設置`height: 100%;` ## 三、外層div標簽包裹 用div標簽包裹圖片，這種方案比較通用，缺點：產生無用標簽。 6人點贊