鍍金池/ 問(wèn)答/HTML/ css關(guān)于寬高比的問(wèn)題

css關(guān)于寬高比的問(wèn)題

<div id=box>

<img src=''>

</div>

box{

overflow: hidden
height: 0
padding-bottom: 43.372rem

}
目前1rem = 50px 圖片寬高分別是640 276，寬高比padding-bottom的值是如何算出來(lái)的

回答
編輯回答
澐染

根據(jù)題目和描述，你想讓box的寬高比等于圖片的 640:276, 那么padding-bottom應(yīng)該使用百分比，這個(gè)百分比的實(shí)際像素值參照物是box的父級(jí)container寬度。 在本例中，padding-bottom的值應(yīng)為 276/640 * 100% = 43.125%

實(shí)際dom結(jié)構(gòu)

<div class="box-container" style="width:???">
    <div id="box" style="width:100%">
        <img/>
    </div>
</div>
2018年8月27日 15:10