今天在寫代碼的過程中遇到了在 flex 布局中,圖片會(huì)被自動(dòng)拉伸的問題断盛。這與 flex-shrink 這個(gè)屬性的默認(rèn)值有關(guān)罗洗,具體屬性描述可以參考 MDN 文檔,下面是兩條常用的解決辦法钢猛。
1.因?yàn)?flex-shrink 的默認(rèn)值為 1,才會(huì)導(dǎo)致圖片拉伸命迈,在 img 標(biāo)簽將其默認(rèn)值改為 0 即可贩绕。
img {
????flex-shrink:0;
}
2.為被拉伸的 img 標(biāo)簽添加 div 父標(biāo)簽將其包裹起來,不過這個(gè)方法會(huì)產(chǎn)生無用的標(biāo)簽壶愤。