フレックスレイアウトにおける画像変形の解決策の詳細な説明

<div class="people">
	<img class="アバター" src="./avatar.jpg" alt="アバター">
	<div class="des">
		<p>トニー</p>
		<p>そうです、私はあなたの先生のトニーです。私に髪を切ってもらいに来てください！ </p>
	</div>
</div>

/* 親要素 */
。人々 {
	ディスプレイ: フレックス;
}
/* アバター*/
.アバター{
	幅: 64ピクセル;
	高さ: 64px;
	境界線の半径: 32px;
}
/* キャラクター紹介 */
.des {
	左マージン: 24px;
}

<div class="people">
	<div><img class="アバター" src="./avatar.jpg" alt="アバター"></div>
	<div class="des">
		<p>トニー</p>
		<p>そうです、私はあなたの先生のトニーです。私に髪を切ってもらいに来てください！ </p>
	</div>
</div>

/* アバター*/
/* flex-shrink プロパティは、アイテムの縮小率を定義します。デフォルト値は 1 で、十分なスペースがない場合、アイテムは縮小されます。 */
/* 要素の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不足しても値が 0 の項目は縮小されません。 */
.アバター{
	フレックス収縮: 0;
	幅: 64ピクセル;
	高さ: 64px;
	境界線の半径: 32px;
}