作者:新视觉9927 | 来源:互联网 | 2020-08-11 09:33
本篇文章给大家带来的内容是关于如何实现图片在页面中宽高一直保持16:9的比例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
目标:
遇到一个需求,让图片在页面中,不管宽度如何变化。宽高保持16:9的比例。
实现:
方法一:这也是比较经典的一个方法,利用padding-bottom来实现。
方法二:利用vmin来实现。
注意:如果屏幕宽度较大高度较小时,则可以用vmax。如果需要随意切换时,可以通过js来控制。
总结:
两种方法各有利弊,方法一:兼容性好,代码相对长点,理解也比较困难点。方法二:代码简洁,理清定义后便非常容易理解,但是兼容性相对差一些。不过兼容性啥的,怕什么哈哈哈。
以上就是如何实现图片在页面中宽高一直保持16:9的比例的详细内容,更多请关注 第一PHP社区 其它相关文章!