成都网站建设设计

将想法与焦点和您一起共享

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

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

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

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

实现:

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




    固定宽高比16:9
    


这是一个16:9的矩形

方法二:利用vmin来实现。




    固定宽高比16:9
    


这是一个16:9的矩形

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

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


网页名称:实现图片在页面中宽高一直保持16:9比例的方法
网页路径:http://chengdu.cdxwcx.cn/article/peioje.html