Detailed explanation of the solution to image deformation under flex layout

Flex layout is a commonly used layout method nowadays, but sometimes it can cause some minor problems. When I was using flex layout to make an avatar on the left and text on the right, I found that when the width of the image was fixed, the width of the image still changed.

The picture below shows that the avatar should be round, but it has been squeezed and deformed.

<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;
}

A common way to search online is to wrap a div outside the img tag.

<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>

Another simpler way is to add flex-shrink: 0 directly to the avatar's css.

/* 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;
}

This concludes this article on the solution to image deformation under flex layout. For more relevant flex image deformation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

>>: An article to understand what is MySQL Index Pushdown (ICP)