详细说明flex合理布局■下面的图片形变的处理方

2021-03-23 11:54 jianzhan

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照片形变內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!