flex布局下图片不变形的方法是什么?

Admin 2021-10-11 群英技术资�

    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布局有帮助,想要了解更多实现flex布局的内容,大家可以继续浏览群英网络其他相关的文章�

文本转载自脚本之�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部