CSS寬高等比佈局

木子昭發表於2018-03-10
CSS

寬度是高度的兩倍(等比縮放)

實現思路: 以父級元素為基準, 子級width:100%;(也就是父級寬度的100%), padding-top:50%(也就是父級寬度的50%,根據css規範, padding用百分比表示的話, padding: 100%等於父元素的寬度);

為什麼不直接`width: 50%; height: 50%;?

那樣高度就成了父級高度的50% (不合題意,除非父級寬高相等);

原題目:

  • 紅色塊級元素垂直居中於螢幕中央；
  • 紅色塊級元素距離螢幕左右邊距各20px;
  • 紅色塊級元素裡面的內容水平垂直居中；
  • 紅色塊級元素的高度始終是紅色塊級元素寬度的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">

        <div class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武當派弟子（現已離開武當），八奇技之一風后奇門的繼承人，靠占卜悟出天道，卻又作出甘於投身亂世的選擇。外表一副老好人的溫良相，謙謙有禮如溫吞水般，做事也經常是一副沒精打采，貌似沒睡醒的樣子。優哉遊哉還脾氣軟，代表舉動經常是歉意笑著作出讓步。似乎對什麼都無所謂，一副悠然道人之姿，但是在涉及到家人安危時毫不含糊，甚至為此做出過有失冷靜的舉動。不小心爆粗都會拜祖道歉的出家人，實力在後生一輩中甚至稱得上頭籌，暫時只有一次完全沒預料到地陰溝裡翻船。</span></div>


    </section>

</body>
</html>


相關文章