display:flex布局,防止圖片被壓縮flex-shrink: 0


設置了固定寬高的圖片被壓縮

通常實現如下的效果,是把外層容器設置為display:flex,容器中圖片設置固定寬高度,右邊元素設置為flex:1,但當右邊元素寬度超出剩余空間的時候,圖片會被擠壓,變成橢圓形。

 

這是因為在flex容器中,當空間不夠的時候,flex-shrink不為0的元素會被壓縮,所以解決的方法就是給圖片設置:flex-shrink:0。

.existCollages .row image {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0;/*防止被壓縮*/
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM