這篇文章主要介紹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)需要的效果。

<div class="father">
    <div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
  padding-bottom: 20%;
  width: 20%;
  height: 0;
  background: #888888;
}
</style>

上例寬高比是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;
}
</style>
<div id='container'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

這個方法不需要考慮任何兼容性，PC移動完美運行。除了增加了一個dom結(jié)構(gòu)，但是一個頁面成百上千的代碼來說，不值一提。

如果你覺得增加img標簽多發(fā)了http請求，那么base64圖片編碼可以解決這個問題，由于我們的的圖片只需要一個形狀而已，所

以可以大膽的壓縮，然后編碼，連http請求都省了。

【方案三：vw,vh】

css3的新單位(css3大法好~)，我們將父容器的寬度和高度定義為相同的vw，這樣父容器的高度和寬度就是相同值，這個時候，子容器的寬高值設(shè)為百分比，不管父容器大小如何變，子容器的高度和寬度比都是不會變的

單位 說明
vw 相對于視窗的寬度
vh 相對于視窗的高度
vmin 相對于視口的寬度或高度中較小的那個被均分為100單位的vmin

vmax 相對于視口的寬度或高度中較大的那個被均分為100單位的vmax

<div class="father">
    <div class="childbox"></div>
</div>
.childbox{    
  width: 20%;
  height: 20vw;
  background: #888888;
}

以上是“css如何實現(xiàn)高度隨寬度比例變化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標題：css如何實現(xiàn)高度隨寬度比例變化-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.chinadenli.net/article42/gsdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站營銷、網(wǎng)站策劃、品牌網(wǎng)站制作、服務(wù)器托管、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)