HTML5開發-設置圖片(或是div)的寬高比

當寬度固定時

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

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

當高度固定時

  • 高度為固定的像素
    直接通過比例計算獲得寬度

  • 高度為父元素的百分比
    暫時還不知道用什么辦法,目前只能通過 js 來動態的設置寬高。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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