小編給大家分享一下實現(xiàn)圖片在頁面中寬高一直保持16：9比例的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供鎮(zhèn)賚網(wǎng)站建設、鎮(zhèn)賚做網(wǎng)站、鎮(zhèn)賚網(wǎng)站設計、鎮(zhèn)賚網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、鎮(zhèn)賚企業(yè)網(wǎng)站模板建站服務，十多年鎮(zhèn)賚做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

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

實現(xiàn)：

方法一：這也是比較經(jīng)典的一個方法，利用padding-bottom來實現(xiàn)。

    
    



    

        
這是一個16：9的矩形
    

方法二：利用vmin來實現(xiàn)。

    
    



    

        
這是一個16：9的矩形
    

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

看完了這篇文章，相信你對實現(xiàn)圖片在頁面中寬高一直保持16：9比例的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！