开发者社区> 木子昭> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS宽高等比布局

简介: 宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 10...
+关注继续查看

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端基础知识系列一CSS(基础布局)
最近在改造之前项目的UI,发下自身对于css的许多知识掌握的还没有成体系化,乘着最近有时间就来看看我们熟悉又陌生的CSS,先说下学习路径:菜鸟教程(指的是看的人菜),MDN,掘金小册玩转CSS的艺术之美。结合着看,集百家之长,补己之短。
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
css, css3, flex实现圣杯布局
css, css3, flex实现圣杯布局
0 0
你不知道的flex布局 css3 flex 基础
你不知道的flex布局 css3 flex 基础
0 0
2023年你应该需要知道的CSS新特性-布局篇
前一段时间State of CSS发起了2022年的调查问卷,该文件的内容主要是CSS新特性、框架、工具库的使用情况,这里我将会用几篇文章整理一下这个问卷中涉及到的新特性
0 0
【CSS布局】—— flex(弹性)布局
【CSS布局】—— flex(弹性)布局
0 0
通俗重制系列--CSS布局
通俗重制系列--CSS布局
0 0
CSS定位布局详解
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动,能够创建多种高级而精确的布局。其中,定位布局共有4种方式。固定定位(fixed)。相对定位(relative)。绝对定位(absolute)。静态定位(static)
0 0
+关注
木子昭
# 专注极客体验 # 享受效率生活 --- 让程序去做呗~ 程序又不会累~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载