CSSは親コンテナのdivをimg画像で埋め、コンテナのサイズに適応します。

CSSは親コンテナのdivをimg画像で埋め、コンテナのサイズに適応します。

ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズで表示したい場合、画像サイズを直接設定すると画像が変形してしまいます。これが私たちが遭遇した問題です。解決策を見てみましょう。

<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 をよろしくお願いいたします。

<<:  Dockerfile 内の予約語命令の解析処理

>>:  要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解

推薦する

MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...

ドメイン名、ポート、IPに基づいてnginx仮想ホストを構築する

nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...

NavicatがMySQL8.0.11に接続するとエラー2059が発生する

間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

MySQLクエリ文の実行プロセスの詳細な説明

目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...

Vue の get リクエストと post リクエストの違いのまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

Windows と Linux 間のリモート デスクトップ接続

Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...

HTML テーブル マークアップ チュートリアル (10): セル パディング属性 CELLPADDING

セルのパディングは、セルの内容と境界線の間の距離です。基本的な構文<TABLE セルパディング...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

Vue命令の実装原理の分析

目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....

DockerでLNMPアーキテクチャを展開する方法

環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...

jQuery をベースにリスト ループ スクロールを実装するためのヒント (超簡単)

良いアイデアを見つけたので記録しました。私は以前、スクロール効果を実現するためにjQueryを使用し...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...