Una

接下来的日子,陆续把未总结的问题补充起来......

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  145 随笔 :: 0 文章 :: 12 评论 :: 22万 阅读
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

一、元素等比缩放解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
             /*等比缩放*/
                    .box{
                    position: relative;
                    width: 50%;     /* desired width */
                    background: #000;
                    color: #fff;
                }
                .box:before{
                    content: "";
                    display: block;
                    padding-top: 100%; 
                    background: #f00;
                }
                .content{
                    position:  absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                }
        </style>
     
     
        <div class='box'>
              <div class='content'>1:1</div>
            </div>

  

 包含内容的元素使用绝对定位布局,利用元素的padding的百分比属性去设置元素的高度。

  padding可以设置的值:

    1、长度,非负的固定宽度

    2、百分比,相对于父元素的宽度。

   

posted on   youyi2016  阅读(353)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容
点击右上角即可分享
微信分享提示