這篇文章主要講解了“如何使用CSS保持頁面內(nèi)容寬高比”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用CSS保持頁面內(nèi)容寬高比”吧！
為恭城等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及恭城網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、成都網(wǎng)站設計、恭城網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
需求描述：移動端實現(xiàn)橫跨頁面半圓。（類似問題，實現(xiàn)4x4的正方形網(wǎng)格）
簡化問題，我們可以理解為實現(xiàn)一個高度和寬度比為1:2的塊。
需要解決問題：
1，高度和寬度按照一定比例。
2，外容器高度和寬度不確定。
3，盡量不使用圖片和腳本替代。
4，兼容移動端。
編寫html
XML/HTML Code復制內(nèi)容到剪貼板
思考一，使用height：100%，
CSS Code復制內(nèi)容到剪貼板
body{
margin:0;
width: 100%;
background: lightblue;
}
.semicircle {
width: 100%;
height: 100%;
border-top:5px solid #fff;
border-radius: 100%;
}
存在問題，height的百分比是根據(jù)父容器計算的，不是當前容器，根本滿足不了我們的需求。效果如下：
父容器body的高度百分比為其子容器所填充的高度關聯(lián)，即便設置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的百分比是根據(jù)父容器的width（寬度）計算的，而不是height（高度）。其他比例實現(xiàn)對照表
| aspect ratio | padding-bottom value |
|---|---|
| 16:9 | 56.25% |
| 4:3 | 75% |
| 3:2 | 66.66% |
| 8:5 | 62.5% |
CSS Code復制內(nèi)容到剪貼板
body{
margin:0;
width: 100%;
background: lightblue;
}
.semicircle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-top:5px solid #fff;
border-radius: 100%;
}
思考三，使用vw單元
使用vw單元設定元素高度和寬度，vm的大小是通過viewport的寬度設定的，因此可以通過該方法保持容器按照一定比例顯示。一單位的vw等于百分之一的viewport寬度，即100vw等于100%viewport寬度。
CSS Code復制內(nèi)容到剪貼板
body{
margin:0;
width: 100%;
background: lightblue;
}
.semicircle {
width: 100vw;
height:100vw;
border-top:5px solid #fff;
border-radius: 100%;
}
對照表
| aspect ratio | multiply width by |
|---|---|
| 1:1 | 1 |
| 1:3 | 3 |
| 4:3 | 0.75 |
| 16:9 | 0.5625 |
思考四，使用偽元素和inline-block布局
CSS Code復制內(nèi)容到剪貼板
body {
width: 100%;
font-size: 0;
text-align: center;
background: lightblue;
}
.semicircle {
border-top:5px solid #fff;
border-radius: 100%;
}
.semicircle:before {
content:"";
display: inline-block;
padding-bottom: 100%;
}
雖然代碼有點復雜，但是靈活性強，可以實現(xiàn)更多類似的效果。
當需求改成實現(xiàn)一個橫跨屏幕80%的寬度的半圓，我們只需要在.semicircle中添加屬性width:80%;，順便也把容器居中實現(xiàn)了。
該方法的原理很清晰：
參考思考一，無法通過高度100%來擴充外容器高度，那么可以通過偽元素，插入一個高度和寬度一致的元素，將容器撐開成一比一高度的容器。注意，該方法實現(xiàn)半圓，實際需要寬高為一比一的容器，即占用空間為上述方法的兩倍。
設置:before元素邊界，解析原理：
思考五，使用圖片，兼容低檔次移動設備。
CSS Code復制內(nèi)容到剪貼板
.semicircler img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
使用腳本，css更加簡潔明了，目標清晰。
CSS Code復制內(nèi)容到剪貼板
div.style.height=div.offsetWidth+"px";
對于實現(xiàn)2*2正方形網(wǎng)格
CSS Code復制內(nèi)容到剪貼板
*------main code-------*/
body {
width: 100%;
margin:0;
text-align: center;
}
div{
display: inline-block;
width: 50%;
background: lightblue;
font-size: 12px;
position: relative;
vertical-align: middle;
}
div:before {
content:"";
display: inline-block;
padding-bottom: 100%;
vertical-align: middle;
}
/*------other code-------*/
div:nth-child(2),div:nth-child(3){
background: pink;
}
span {
display: inline-block;
vertical-align: middle;
font-size: 6em;
color: #fff;
}
感謝各位的閱讀，以上就是“如何使用CSS保持頁面內(nèi)容寬高比”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何使用CSS保持頁面內(nèi)容寬高比這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！
重慶分公司
重慶分公司
