我的前端組件 ---- 16:9固定寬高比例的div

xingpingz 發布于2019-08-02 11:46 / 2480人閱讀

摘要：寬高保持的比例。固定寬高比相對于可視窗口的寬度或高度中較小的那個，被均分為單位的例當寬度是，高度是，那么則是相對于寬度的這是一個的矩形注意如果屏幕寬度較大高度較小時，則可以用。

目標：
遇到一個需求，讓圖片在頁面中，不管寬度如何變化。寬高保持16：9的比例。

實現：

方法一：這也是比較經典的一個方法，利用padding-bottom來實現。




    固定寬高比16:9
    



    
        這是一個16：9的矩形

方法二：利用vmin來實現。




    固定寬高比16:9
    



    
        這是一個16：9的矩形

注意：如果屏幕寬度較大高度較小時，則可以用vmax。如果需要隨意切換時，可以通過js來控制。

總結：
兩種方法各有利弊，方法一：兼容性好，代碼相對長點，理解也比較困難點。方法二：代碼簡潔，理清定義后便非常容易理解，但是兼容性相對差一些。不過兼容性啥的，怕什么哈哈哈。

云服務器 GPU云服務器固定寬高 DIV固定固定div 前端組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53102.html

我的前端組件 ---- 16:9固定寬高比例的div

摘要：寬高保持的比例。固定寬高比相對于可視窗口的寬度或高度中較小的那個，被均分為單位的例當寬度是，高度是，那么則是相對于寬度的這是一個的矩形注意如果屏幕寬度較大高度較小時，則可以用。目標：遇到一個需求，讓圖片在頁面中，不管寬度如何變化。寬高保持16：9的比例。實現：方法一：這也是比較經典的一個方法，利用padding-bottom來實現。固定寬高比16:9 ...

張遷 2019-08-29 17:02 評論0 收藏0
我的前端組件 ---- 16:9固定寬高比例的div

摘要：寬高保持的比例。固定寬高比相對于可視窗口的寬度或高度中較小的那個，被均分為單位的例當寬度是，高度是，那么則是相對于寬度的這是一個的矩形注意如果屏幕寬度較大高度較小時，則可以用。目標：遇到一個需求，讓圖片在頁面中，不管寬度如何變化。寬高保持16：9的比例。實現：方法一：這也是比較經典的一個方法，利用padding-bottom來實現。固定寬高比16:9 ...

William_Sang 2019-08-23 12:29 評論0 收藏0