彈性佈局圖片變形

問題圖示

變形的圖片

變形的圖片

正常的圖片

正常的圖片

解決方案

方案1：用 div 標籤包裹 img 標籤
用div標籤包裹圖片，這種方案比較通用。
缺點：產生無用標籤。

方案2：flex-shrink: 0
給 img 設置 flex-shrink: 0;
flex-shrink 的默認值爲1，若是沒有顯示定義該屬性，將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。設置爲0表示不收縮。
flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。
缺點：僅兼容IE11。若是元素不是彈性盒對象的元素，則 flex-shrink 屬性不起做用。

方案3：img 設置 height: 100%
在父元素沒有設置高度的狀況下，給圖片設置 height: 100%;

看完文章還有福利拿，往下看👇👇👇
小夥伴能夠在公號【grain先森】後臺回覆【190301】獲取130套簡歷模板。後期小編會建微信羣和你們交流分享，期待大家哦！

本文同步分享在 博客「grain先森」（JianShu）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。