ホームページ > 記事 > ウェブフロントエンド > 幅と高さの比例レイアウトを実装する CSS コード

幅と高さの比例レイアウトを実装する CSS コード

小云云オリジナル: 2018-03-14 09:38:271493ブラウズ

幅は高さの2倍です（合同スケーリング）実装のアイデア：親要素に基づいて、子の幅：100％（つまり、親の幅の100％）、パディングトップ：50％（これも同様です） CSS 仕様によれば、パディングがパーセンテージで表される場合、padding: 100% は親要素の幅と同じになります);

なぜ単に `width: 50%; height: 50%;?

この場合、高さは親の高さの 50% になります (親の幅と高さが等しい場合を除く)

元の質問:

赤いブロック -レベル要素は画面の中央に垂直方向に中央揃えで配置されます。
赤色のブロックレベル要素は画面の左右の余白から 20 ピクセル離れた位置に配置されます。
赤色のブロックレベル要素内のコンテンツは水平方向に中央揃えで配置されます。
赤いブロックレベル要素の高さは、常に赤いブロックレベル要素の幅の 50% です。

赤い部分の幅と高さの比は 2:1 です

ソースコード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高比例固定</title>
    <style>

        .father{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #0c8ac5;
        }

        .son{
            width: 100%;
            padding-top: 50%;
            background-color: #c03035;

        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #D8D8D8;
        }

        img{
            float: left;
            margin-right: 10px;
            border: 2px solid #fdf6e3;
        }

    </style>
</head>
<body>
    <section class="father">
        <p class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子（现已离开武当），八奇技之一风后奇门的继承人，靠占卜悟出天道，却又作出甘于投身乱世的选择。外表一副老好人的温良相，谦谦有礼如温吞水般，做事也经常是一副没精打采，貌似没睡醒的样子。优哉游哉还脾气软，代表举动经常是歉意笑着作出让步。似乎对什么都无所谓，一副悠然道人之姿，但是在涉及到家人安危时毫不含糊，甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人，实力在后生一辈中甚至称得上头筹，暂时只有一次完全没预料到地阴沟里翻船。</span></p>
    </section>
</body>
</html>

幅と高さの比例レイアウトを実装する CSS コード

関連記事