成都创新互联网站制作重庆分公司

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

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

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

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

实现:

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




    固定宽高比16:9
    


这是一个16:9的矩形

方法二:利用vmin来实现。




    固定宽高比16:9
    


这是一个16:9的矩形

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

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


当前文章:实现图片在页面中宽高一直保持16:9比例的方法
当前路径:http://cxhlcq.com/article/peioje.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部