溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹flex布局下圖片變形怎么辦，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
flex布局是現在常用的一個布局方式，但是有時候也會導致出現一些小問題。本人在使用flex布局做一個左邊頭像，右邊文字的時候，發現固定圖片的寬度時，圖片寬度仍然發生了變化。
下圖是頭像本應該是圓形的，但是被擠壓變形了。
<div class="people"> <img class="avatar" src="./avatar.jpg" alt="avatar"> <div class="des "> <p>Tony</p> <p>沒錯，我就是你們的Tony老師，快來找我剪頭發吧！</p> </div> </div>
/* 父元素 */
.people {
display: flex;
}
/* 頭像 */
.avatar {
width: 64px;
height: 64px;
border-radius: 32px;
}
/* 人物介紹 */
.des {
margin-left: 24px;
}
網上查找常用的辦法是在 img 標簽外再套一個 div
<div class="people"> <div><img class="avatar" src="./avatar.jpg" alt="avatar"></div> <div class="des "> <p>Tony</p> <p>沒錯，我就是你們的Tony老師，快來找我剪頭發吧！</p> </div> </div>
還有一種更簡單的方法是直接給頭像的css添加 flex-shrink: 0 更為簡單
/* 頭像 */
/* flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。 */
/* 如果某一個元素的 flex-shrink 屬性為 0，其他項目都為 1，空間不足時，值為 0 的不縮小。 */
.avatar {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 32px;
}
以上是“flex布局下圖片變形怎么辦”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
