Detailed explanation of the solution to image deformation under flex layout

<div class="people">
	<img class="avatar" src="./avatar.jpg" alt="avatar">
	<div class="des">
		<p>Tony</p>
		<p>That’s right, I am your teacher Tony, come and get your hair cut by me! </p>
	</div>
</div>

/* Parent element */
.people {
	display: flex;
}
/* avatar*/
.avatar {
	width: 64px;
	height: 64px;
	border-radius: 32px;
}
/* Character introduction*/
.des {
	margin-left: 24px;
}

<div class="people">
	<div><img class="avatar" src="./avatar.jpg" alt="avatar"></div>
	<div class="des">
		<p>Tony</p>
		<p>That’s right, I am your teacher Tony, come and get your hair cut by me! </p>
	</div>
</div>

/* avatar*/
/* The flex-shrink property defines the shrink ratio of the item. The default value is 1, which means that if there is not enough space, the item will shrink. */
/* If the flex-shrink property of an element is 0 and the other items are 1, the one with a value of 0 will not shrink when there is insufficient space. */
.avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 32px;
}