画面サイズに合わせた要素をCSSで実装するアイデアとは？

画面サイズに合わせて要素を実装する前に、まず CSS の知識ポイントを紹介しましょう。

要素のmarginおよびpadding属性の値(上下マージンまたは左右マージン)がパーセンテージに設定されている場合、それらは幅に基づいて計算されます。

つまり、アスペクト比がわかっている場合、CSS は高さの値を決定できませんが、padding-top などの属性の値を決定できます。

実装アイデア:

1. アスペクト比 (高さ/幅) を計算し、padding-top の値に設定し、高さを 0 (によってサポートされる要素の高さ) に設定します。パディングトップ)。

2. このとき、実際の要素の内容は下に押し込まれているので、位置を変更するには絶対配置を使用します。

(ビデオチュートリアルの推奨: css ビデオチュートリアル)

実装コード:

html コード:

<div class="ac_coupon-wrap">
    <div class="ac_coupon-content">
        <!-- 内容 -->
    </div>
</div>

css コード:

.ac_coupon-wrap {
    height: 0;
    padding-top: 15.16%;
    position: relative;
    .ac_coupon-content {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
    }
}

推奨チュートリアル: css クイック スタート

以上が画面サイズに合わせた要素をCSSで実装するアイデアとは？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。