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 を応援していただければ幸いです。