实现图片在页面中宽高一直保持16：9比例的方法

小编给大家分享一下实现图片在页面中宽高一直保持16：9比例的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联建站专业为企业提供镇赉网站建设、镇赉做网站、镇赉网站设计、镇赉网站制作等企业网站建设、网页设计与制作、镇赉企业网站模板建站服务，十多年镇赉做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

目标：
遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。

实现：

方法一：这也是比较经典的一个方法，利用padding-bottom来实现。

    
    



    

        
这是一个16：9的矩形
    

方法二：利用vmin来实现。

    
    



    

        
这是一个16：9的矩形
    

注意：如果屏幕宽度较大高度较小时，则可以用vmax。如果需要随意切换时，可以通过js来控制。

看完了这篇文章，相信你对实现图片在页面中宽高一直保持16：9比例的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！