南强小屋 Design By 杰米

需求描述:移动端实现横跨页面半圆。(类似问题,实现4x4的正方形网格)
实例讲解如何使用CSS保持页面内容宽高比

简化问题,我们可以理解为实现一个高度和宽度比为1:2的块。

需要解决问题:

       1,高度和宽度按照一定比例。

       2,外容器高度和宽度不确定。

       3,尽量不使用图片和脚本替代。

       4,兼容移动端。

编写html

XML/HTML Code复制内容到剪贴板
  1. <div class = "semicircle"></div>  

 

思考一,使用height:100%,

CSS Code复制内容到剪贴板
  1. body{   
  2.     margin:0;   
  3.     width: 100%;   
  4.     background: lightblue;   
  5. }   
  6.     
  7. .semicircle {   
  8.     width: 100%;   
  9.     height: 100%;   
  10.     border-top:5px solid #fff;   
  11.     border-radius: 100%;   
  12. }  

  存在问题,height的百分比是根据父容器计算的,不是当前容器,根本满足不了我们的需求。效果如下:
实例讲解如何使用CSS保持页面内容宽高比

父容器body的高度百分比为其子容器所填充的高度关联,即便设置body高度100%,由于子容器即semicircle所填充的实际高度为边界的5,无法将父容器“全部撑开”,因此无法通过设定父容器的高度为百分比指定宽高按照一定比例的容器。

思考二,设定padding-top或padding-bottom为100%
The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3.org, emphasis mine)

百分比宽度的计算与所生成盒子的包含块宽度有关。padding-top、padding-bottom的百分比是根据父容器的width(宽度)计算的,而不是height(高度)。其他比例实现对照表

aspect ratio padding-bottom value 16:9 56.25% 4:3 75% 3:2 66.66% 8:5 62.5%

CSS Code复制内容到剪贴板
  1.   
  2. body{   
  3.     margin:0;   
  4.     width: 100%;   
  5.     background: lightblue;   
  6. }   
  7.   
  8. .semicircle {   
  9.     width: 100%;   
  10.     height: 0;   
  11.   
  12.     padding-bottom: 100%;   
  13.     border-top:5px solid #fff;   
  14.     border-radius: 100%;   
  15. }  

思考三,使用vw单元
使用vw单元设定元素高度和宽度,vm的大小是通过viewport的宽度设定的,因此可以通过该方法保持容器按照一定比例显示。一单位的vw等于百分之一的viewport宽度,即100vw等于100%viewport宽度。

CSS Code复制内容到剪贴板
  1. body{   
  2.     margin:0;   
  3.     width: 100%;   
  4.     background: lightblue;   
  5. }   
  6.   
  7. .semicircle {   
  8.      width: 100vw;   
  9.       height:100vw;   
  10.     border-top:5px solid #fff;   
  11.     border-radius: 100%;   
  12. }  

对照表

aspect ratio multiply width by 1:1 1 1:3 3 4:3 0.75 16:9 0.5625


思考四,使用伪元素和inline-block布局

CSS Code复制内容到剪贴板
  1. body {   
  2.     width: 100%;   
  3.     font-size: 0;   
  4.     text-align: center;   
  5.     background: lightblue;   
  6. }   
  7. .semicircle {   
  8.     border-top:5px solid #fff;   
  9.     border-radius: 100%;   
  10. }   
  11.   
  12. .semicircle:before {   
  13.     content:"";   
  14.     display: inline-block;   
  15.     padding-bottom: 100%;   
  16. }  

虽然代码有点复杂,但是灵活性强,可以实现更多类似的效果。

当需求改成实现一个横跨屏幕80%的宽度的半圆,我们只需要在.semicircle中添加属性width:80%;,顺便也把容器居中实现了。

该方法的原理很清晰:

参考思考一,无法通过高度100%来扩充外容器高度,那么可以通过伪元素,插入一个高度和宽度一致的元素,将容器撑开成一比一高度的容器。注意,该方法实现半圆,实际需要宽高为一比一的容器,即占用空间为上述方法的两倍。

设置:before元素边界,解析原理:
实例讲解如何使用CSS保持页面内容宽高比

思考五,使用图片,兼容低档次移动设备。

CSS Code复制内容到剪贴板
  1. .semicircler img {   
  2.   width: 100%;   
  3.   background-repeat: no-repeat;   
  4.   background-size: 100% 100%;   
  5.   background-image: url(../img/autoresized-picture.jpg);   
  6. }  

使用脚本,css更加简洁明了,目标清晰。

CSS Code复制内容到剪贴板
  1. div.style.height=div.offsetWidth+"px";  

 

对于实现2*2正方形网格
实例讲解如何使用CSS保持页面内容宽高比

CSS Code复制内容到剪贴板
  1. *------main code-------*/   
  2.         body {   
  3.           width: 100%;   
  4.           margin:0;   
  5.           text-align: center;   
  6.         }   
  7.         div{   
  8.           display: inline-block;   
  9.           width: 50%;   
  10.           background: lightblue;   
  11.           font-size: 12px;   
  12.           position: relative;   
  13.           vertical-align: middle;   
  14.         }   
  15.   
  16.         div:before {   
  17.             content:"";   
  18.             display: inline-block;   
  19.             padding-bottom: 100%;   
  20.             vertical-align: middle;   
  21.   
  22.         }   
  23.   
  24.         /*------other code-------*/  
  25.         div:nth-child(2),div:nth-child(3){   
  26.             background: pink;   
  27.         }   
  28.   
  29.   
  30.         span {   
  31.             display: inline-block;   
  32.             vertical-align: middle;   
  33.             font-size: 6em;   
  34.             color: #fff;   
  35.         }          

       

标签:
CSS,宽高比

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“实例讲解如何使用CSS保持页面内容宽高比”

暂无实例讲解如何使用CSS保持页面内容宽高比的评论...

更新日志

2024/3/28
  1. 添加三国志11《三国志11PK典藏版》制作精良的MOD大作 值得收藏
  2. 万年历 5.0.0 无任何广告 Android版
  1. 游戏闪退报错?丢失MSVCPXXX.DLL一键解决问题的神器