집 > 기사 > 웹 프론트엔드 > 너비 대 높이 비례 레이아웃을 구현하는 CSS 코드

너비 대 높이 비례 레이아웃을 구현하는 CSS 코드

小云云원래의: 2018-03-14 09:38:271491검색

너비는 높이의 두 배입니다(일치적 크기 조정)구현 아이디어: 상위 요소를 기준으로 하위 너비: 100%(즉, 상위 너비의 100%), 패딩 상단: 50%(또한 상위 너비의 50%. CSS 사양에 따라 패딩이 백분율로 표시되는 경우 패딩: 100%는 상위 요소의 너비와 같습니다.

'width: 50%; 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 코드

관련 기사