如何使用CSS保持页面内容宽高比

这篇文章主要讲解了“如何使用CSS保持页面内容宽高比”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用CSS保持页面内容宽高比”吧！

需求描述：移动端实现横跨页面半圆。（类似问题，实现4x4的正方形网格）

简化问题，我们可以理解为实现一个高度和宽度比为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的百分比是根据父容器计算的，不是当前容器，根本满足不了我们的需求。效果如下：

父容器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（高度）。其他比例实现对照表

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. }  

对照表

思考四，使用伪元素和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 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 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保持页面内容宽高比”的内容了，经过本文的学习后，相信大家对如何使用CSS保持页面内容宽高比这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！