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