css如何實現(xiàn)高度隨寬度比例變化-創(chuàng)新互聯(lián)
這篇文章主要介紹css如何實現(xiàn)高度隨寬度比例變化，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
我們注重客戶提出的每個要求，我們充分考慮每一個細節(jié)，我們積極的做好網(wǎng)站建設(shè)、
成都網(wǎng)站設(shè)計服務(wù)，我們努力開拓更好的視野，通過不懈的努力，
創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,
小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。
【方案一：padding實現(xiàn)】
原理：
一個元素的 padding，如果值是一個百分比，那這個百分比是相對于其父元素的寬度而言的，padding-bottom 也是如此。
使用 padding-bottom 來代替 height 來實現(xiàn)高度與寬度成比例的效果，將 padding-bottom設(shè)置為想要實現(xiàn)的 height 的值。同時將
其 height 設(shè)置為 0 以使元素的“高度”等于 padding-bottom 的值，從而實現(xiàn)需要的效果。
.childbox{
padding-bottom: 20%;
width: 20%;
height: 0;
background: #888888;
}
上例寬高比是1比1，實現(xiàn)的是正方形，并且根據(jù)父級盒子寬度實現(xiàn)等比縮放
【方案二：一個隱藏的圖片來實現(xiàn)】
原理:
div容器如果不給定高度，它的高度會隨著容器內(nèi)部的元素變化而撐大，這個時候，我們在容器內(nèi)部添加一張符合我們寬高比例的圖片，給圖片設(shè)置寬度100%；高度auto，我們知道圖片只設(shè)置寬度的話，高度會隨寬度來進行比例變化，自動縮放，這樣我們內(nèi)部的子容器的高度也就會按照比例縮放了。當然這個img你可以占位隱藏，也可以用別的盒子覆蓋上。
#container {
width: 100%;
}
.attr {
background-color: #008b57;
}
.attr img{
width: 100%;
height: auto;
}
css3的新單位(css3大法好~)，我們將父容器的寬度和高度定義為相同的vw，這樣父容器的高度和寬度就是相同值，這個時候，子容器的寬高值設(shè)為百分比，不管父容器大小如何變，子容器的高度和寬度比都是不會變的
以上是“css如何實現(xiàn)高度隨寬度比例變化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
