資訊專欄INFORMATION COLUMN
摘要：寬高保持的比例。固定寬高比相對(duì)于可視窗口的寬度或高度中較小的那個(gè)，被均分為單位的例當(dāng)寬度是，高度是，那么則是相對(duì)于寬度的這是一個(gè)的矩形注意如果屏幕寬度較大高度較小時(shí)，則可以用。
目標(biāo)：
遇到一個(gè)需求，讓圖片在頁(yè)面中，不管寬度如何變化。寬高保持16：9的比例。
實(shí)現(xiàn)：
方法一：這也是比較經(jīng)典的一個(gè)方法，利用padding-bottom來實(shí)現(xiàn)。
固定寬高比16:9
這是一個(gè)16：9的矩形
方法二：利用vmin來實(shí)現(xiàn)。
固定寬高比16:9
這是一個(gè)16：9的矩形
注意：如果屏幕寬度較大高度較小時(shí)，則可以用vmax。如果需要隨意切換時(shí)，可以通過js來控制。
總結(jié)：
兩種方法各有利弊，方法一：兼容性好，代碼相對(duì)長(zhǎng)點(diǎn)，理解也比較困難點(diǎn)。方法二：代碼簡(jiǎn)潔，理清定義后便非常容易理解，但是兼容性相對(duì)差一些。不過兼容性啥的，怕什么哈哈哈。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114058.html
摘要：寬高保持的比例。固定寬高比相對(duì)于可視窗口的寬度或高度中較小的那個(gè)，被均分為單位的例當(dāng)寬度是，高度是，那么則是相對(duì)于寬度的這是一個(gè)的矩形注意如果屏幕寬度較大高度較小時(shí)，則可以用。 目標(biāo)：遇到一個(gè)需求，讓圖片在頁(yè)面中，不管寬度如何變化。寬高保持16：9的比例。 實(shí)現(xiàn)： 方法一：這也是比較經(jīng)典的一個(gè)方法，利用padding-bottom來實(shí)現(xiàn)。 固定寬高比16:9 ...
摘要：寬高保持的比例。固定寬高比相對(duì)于可視窗口的寬度或高度中較小的那個(gè)，被均分為單位的例當(dāng)寬度是，高度是，那么則是相對(duì)于寬度的這是一個(gè)的矩形注意如果屏幕寬度較大高度較小時(shí)，則可以用。 目標(biāo)：遇到一個(gè)需求，讓圖片在頁(yè)面中，不管寬度如何變化。寬高保持16：9的比例。 實(shí)現(xiàn)： 方法一：這也是比較經(jīng)典的一個(gè)方法，利用padding-bottom來實(shí)現(xiàn)。 固定寬高比16:9 ...
閱讀 2874·2021-11-24 09:38
閱讀 3511·2021-11-23 09:51
閱讀 967·2021-09-09 11:52
閱讀 4032·2021-08-11 11:18
閱讀 1106·2019-08-30 14:05
閱讀 3228·2019-08-30 11:23
閱讀 1760·2019-08-29 17:02
閱讀 1123·2019-08-26 13:49
