ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズで表示したい場合、画像サイズを直接設定すると画像が変形してしまいます。これが私たちが遭遇した問題です。解決策を見てみましょう。 <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 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...
nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...
最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...
間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...
セルのパディングは、セルの内容と境界線の間の距離です。基本的な構文<TABLE セルパディング...
<iframe src=”test.jsp” width=”100″ height=”50″ ...
目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....
環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...
良いアイデアを見つけたので記録しました。私は以前、スクロール効果を実現するためにjQueryを使用し...
まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...
1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...