用CSS怎样实现宽高等比布局，思路和方法是什么

发布时间：2023-09-26 14:51:30 所属栏目：语言来源：

导读：希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

宽度是高度的两倍(等比缩放)

实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的

希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

宽度是高度的两倍(等比缩放)

实现思路: 以父级元素为基准, 子级 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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!