HTML5開(kāi)發(fā)-設(shè)置圖片(或是div)的寬高比

當(dāng)寬度固定時(shí)

  • 寬度為固定的像素
    那高度可以直接通過(guò)比例計(jì)算獲得。

  • 寬度為父元素的百分比
    假設(shè)寬度為父元素的 80%,寬高比為2:1,則可設(shè)置style為:
    style=“width:80%; height:auto; padding-top: 40%;”

當(dāng)高度固定時(shí)

  • 高度為固定的像素
    直接通過(guò)比例計(jì)算獲得寬度

  • 高度為父元素的百分比
    暫時(shí)還不知道用什么辦法,目前只能通過(guò) js 來(lái)動(dòng)態(tài)的設(shè)置寬高。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,189評(píng)論 1 92
  • 本文主要是起筆記的作用,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,752評(píng)論 0 30
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,226評(píng)論 1 4
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,134評(píng)論 0 2
  • 周末在家休息,給自己下了一個(gè)決心,我今天要看一本書,然后從早上開(kāi)始,我先是賴床,刷手機(jī),莫名其妙就到了12點(diǎn),下樓...
    馬克圖布了閱讀 585評(píng)論 0 2

友情鏈接更多精彩內(nèi)容