新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下实现图片在页面中宽高一直保持16:9比例的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联建站专业为企业提供镇赉网站建设、镇赉做网站、镇赉网站设计、镇赉网站制作等企业网站建设、网页设计与制作、镇赉企业网站模板建站服务,十多年镇赉做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
目标:
遇到一个需求,让图片在页面中,不管宽度如何变化。宽高保持16:9的比例。
实现:
方法一:这也是比较经典的一个方法,利用padding-bottom来实现。
固定宽高比16:9 这是一个16:9的矩形
方法二:利用vmin来实现。
固定宽高比16:9 这是一个16:9的矩形
注意:如果屏幕宽度较大高度较小时,则可以用vmax。如果需要随意切换时,可以通过js来控制。
看完了这篇文章,相信你对实现图片在页面中宽高一直保持16:9比例的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!