本文探讨了在使用flex布局时遇到的图片变形问题，特别是在制作头像加文字的布局时。通过分析实例，提出两种解决方案：1. 在img标签外包裹div，并设置样式；2. 直接给头像元素添加`flex-shrink: 0`属性，防止图片在空间不足时缩小。了解这些技巧，有助于避免flex布局中图片变形的问题。
flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。
下图是头像本应该是圆形的，但是被挤压变形了。
Tony
没错，我就是你们的Tony老师，快来找我剪头发吧！
/* 父元素 */
.people {
display: flex;
}
/* 头像 */
.avatar {
width: 64px;
height: 64px;
border-radius: 32px;
}
/* 人物介绍 */
.des {
margin-left: 24px;
}
网上查找常用的办法是在 img 标签外再套一个 div
Tony
没错，我就是你们的Tony老师，快来找我剪头发吧！
还有一种更简单的方法是直接给头像
最低0.47元/天 解锁文章
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
