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

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

フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生することがあります。フレックスレイアウトを使用して左側にアバター、右側にテキストを作成していたところ、画像の幅を固定しても画像の幅が変わることに気付きました。

下の図では、アバターは丸いはずなのに、圧縮されて変形していることがわかります。

<div class="people">
	<img class="アバター" src="./avatar.jpg" alt="アバター">
	<div class="des">
		<p>トニー</p>
		<p>そうです、私はあなたの先生のトニーです。私に髪を切ってもらいに来てください! </p>
	</div>
</div>
/* 親要素 */
。人々 {
	ディスプレイ: フレックス;
}
/* アバター*/
.アバター{
	幅: 64ピクセル;
	高さ: 64px;
	境界線の半径: 32px;
}
/* キャラクター紹介 */
.des {
	左マージン: 24px;
}

オンライン検索の一般的な方法は、img タグの外側に div をラップすることです。

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

もう 1 つの簡単な方法は、アバターの CSS に flex-shrink: 0 を直接追加することです。

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

フレックスレイアウトでの画像変形の解決策に関するこの記事はこれで終わりです。フレックス画像変形に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  html 内の絶対パス URL と相対パス URL、サブディレクトリ、親ディレクトリ、ルート ディレクトリ

>>:  MySQL Index Pushdown (ICP) とは何かを理解するための記事

推薦する

MySQL への接続時に発生する 1449 および 1045 例外の解決方法

MySQL への接続時に発生する 1449 および 1045 例外の解決方法 mysql 1449:...

CSS で中空効果を実装するサンプルコード

効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...

Linuxのアラーム機能の例の説明

Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...

全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

Linux での一般的なシェル スクリプト コマンドと関連知識

目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

MySQL グループ化クエリと集計関数

概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...

MySQLでトランザクションを開始する方法

序文この記事では主にMySQLでトランザクションを開始する方法について紹介します。関連情報については...

React Hooksを使用する際のよくある落とし穴

React Hooks は React 16.8 で導入された新しい機能で、クラスを使用せずに状態や...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

MySQL パフォーマンス最適化インデックス プッシュダウン

インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...