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

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

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

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

<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) とは何かを理解するための記事

推薦する

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます

Ubuntu 15.04 は MySQL リモート ポート 3306 を開きます。以下の操作はすべて...

Mysql5.7.14 Linux版のパスワードを忘れた場合の完璧な解決策

/etc/my.confファイルで、[mysqld]の下に次の行を追加します: skip-grant...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

最終結果はこんな感じです、かわいいでしょう… PS: HTML と CSS の知識があればベストです...

Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...

CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...

MySQLのFreeListメカニズムの詳細な説明

1. はじめにMySQL が起動すると、BufferPool が初期化されます。クエリ操作を実行する...

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...

MySQL 5.6.23 のインストールと設定環境変数のチュートリアル

この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...

Nginx と Lua を使用した JWT 検証の概要

目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...