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

小云云
풀어 주다: 2018-03-14 09:38:27
원래의
1493명이 탐색했습니다.

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

'width: 50%; 50%;?

이 경우 높이는 부모 높이의 50%가 됩니다(부모의 너비와 높이가 동일하지 않은 경우).

원래 질문:

  1. 빨간색 블록-

  2. 빨간색 블록 수준 요소는 화면의 왼쪽 및 오른쪽 여백에서 20픽셀 떨어져 있습니다.

  3. 빨간색 블록 수준 요소 내부의 콘텐츠는 가로 가운데에 있습니다.

  4. 빨간색 블록 수준 요소의 높이는 항상 빨간색 블록 수준 요소 너비의 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>
로그인 후 복사

관련 권장 사항:

PHP는 최대 너비에 따라 그림 클래스 크기를 조정합니다. 그리고 키 비율

위 내용은 너비 대 높이 비례 레이아웃을 구현하는 CSS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!