CSSは固定比率のブロックレベルコンテナを簡単に実装できる

CSSは固定比率のブロックレベルコンテナを簡単に実装できる

H5 レイアウトを設計する場合、通常はバナーに遭遇することになります。

例えば、2:1 で表示したい場合、もちろんバックエンドから返される画像も 2:1 になるはずですが、そう満足のいくものではないことが多いので、どうすればよいでしょうか。

幅と高さを固定的に書くのはいつも不適切だと感じる

デフォルトの幅: 100%。高さを適応させ、画像がゆっくりと拡大されるようにします (製品マネージャーはこれが悪いユーザー エクスペリエンスだと言うでしょうが、私はユーザーであり、これは良いことだと思っています)

方法はこちら

        .バナーラッパー{
            位置: 相対的;
            幅: 100%;
            パディング上部: 50%;
        }

        .バナー{
            位置: 絶対;
            左: 0;
            上: 0;
            幅: 100%;
            高さ: 100%;
        }
        
        <div class="banner-wrapper">
            <img class="banner" src="./img/portfolio/cabin.png" alt="">
        </div>

説明させてください

padding-top: 50%; が鍵です。パーセンテージを使用してパディングを記述すると、その幅に相対的になります (なぜそうなるのかは聞かないでください)。

つまり、width: 100%; padding-top: 50%; は2:1のボックスを完璧に表示します。

最後に、画像全体を

作業が終わった後の使い方はとても簡単だと思いませんか?

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  DOCTYPE宣言の機能と使い方の詳しい説明

>>:  パーソナライズされた検索エンジンを使用して、必要なパーソナライズされた情報を検索します

推薦する

AWS無料サーバーアプリケーションとネットワークプロキシ設定チュートリアルの詳細な説明

目次予防必要条件AWSアカウントを申請する仮想マシンの申請と有効化仮想マシンを申請するセキュリティグ...

Mysql+JavaSwing に基づくスーパーマーケット商品管理システムの設計と実装

目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...

InnoDB がトランザクション分離レベルを巧みに実装する方法

序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

発生したブラウザの互換性の問題と解決策(推奨)について

序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

Centos7 に DAMO データベースをインストールするチュートリアル

1. 準備Linux オペレーティング システムをインストールした後、ここで Linux 7 を選択...

Vue フォーム入力バインディング v-model

目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...