flex布局下图片不变形的技巧是什么？

发布时间：2023-09-14 09:18:24 所属栏目：语言来源：

导读： flex布局下图片不变形的方法是什么？一些朋友可能对flex布局比较熟悉，因为flex布局是比较常用的一个布局方式，虽然flex布局很好用，但是在使用flex布局也会存在一些问题，例如导致图片变形的情况，那么我们怎样才能

flex布局下图片不变形的方法是什么？一些朋友可能对flex布局比较熟悉，因为flex布局是比较常用的一个布局方式，虽然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布局下图片不变形的方法的介绍，有需要的朋友可以参考，希望对大家学习使用flex布局有帮助。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!