ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズで表示したい場合、画像サイズを直接設定すると画像が変形してしまいます。これが私たちが遭遇した問題です。解決策を見てみましょう。 <div> <img src="インポートした画像のアドレス" alt=""> </div> 方法1: img要素を垂直に中央に配置し、高さと幅を最小のフルスクリーン値に設定します。 div{ 位置:相対; 幅: 100ピクセル; 高さ: 100px; オーバーフロー:非表示; } div画像{ 位置: 絶対; 上位: 50%; 左: 50%; 表示: ブロック; 最小幅: 100%; 最小高さ: 100%; 変換:translate(-50%,-50%); } 方法 2: img の CSS スタイルを設定し、object-fit: cover を追加します。これは、CSS3 の背景画像の background-size: cover に似ています。 div{ 幅: 100ピクセル; 高さ: 100px; } div画像{ 幅: 100%; 高さ: 100%; オブジェクトフィット:カバー; } CSS を使用して親コンテナー div を img 画像で埋め、コンテナーのサイズに合わせる方法についてはこれで終わりです。CSS を使用して親コンテナーのコンテンツを img で埋める方法に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: 要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
目次プロセスデモミニプログラムバックエンドインターフェースプロセス各リクエストインターフェースは検証...
目次1. インストール2.APi 3. react-beautiful-dnddemo 3.1dem...
序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...
今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...
1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...
ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...
エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...
この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...
このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...
目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...
<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...
操作中に Docker コンテナの公開ポートを変更または追加する必要がある場合がありますが、実行中の...
目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...
HTML ウェブ ページのハイパーリンク タグの学習チュートリアル リンク タグの属性 リンクは、ウ...