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 ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

トークン生成と検証を実装するミニプログラム

目次プロセスデモミニプログラムバックエンドインターフェースプロセス各リクエストインターフェースは検証...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...

MySQLとSpringの自動コミットの詳細な説明

1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...

ラジオボタンとチェックボックス効果の純粋な CSS 実装例

ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...

docker.service 起動エラーの詳細なトラブルシューティング

エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...

コメント付きのスネークゲームを実装する js

この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

JavaScript における Arguments オブジェクトの使用に関する詳細な説明

目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

イメージを再構築せずにDockerにポートを動的に追加する方法

操作中に Docker コンテナの公開ポートを変更または追加する必要がある場合がありますが、実行中の...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

HTML ウェブページハイパーリンクタグ

HTML ウェブ ページのハイパーリンク タグの学習チュートリアル リンク タグの属性 リンクは、ウ...