本篇文章给大家带来的内容是关于如何实现图片在页面中宽高一直保持16：9的比例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
目标：
遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。
实现：
方法一：这也是比较经典的一个方法，利用padding-bottom来实现。
固定宽高比16:9 *{ margin: 0px; padding: 0px; } .wrap{ width:100%; } /* 16:9宽高比，则设padding-bottom:56.25% */ /* height: 0px,防止矩形被里面的内容撑出多余的高度*/ .box{ width: 100vw; height: 0px; position: relative; padding-bottom: 56.25%; background: pink; } /* 如果需要在div里面设置内容*/ /* 需要设置position：absolute，才能设置内容高度100%和矩形一样 */ /*.box p{ width: 100%; height: 100%; position: absolute; }*/这是一个16：9的矩形
方法二：利用vmin来实现。
固定宽高比16:9 *{ margin: 0px; padding: 0px; } .wrap{ width:100%; } /*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/ /*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/ .box{ height: 56.25vmin; background: pink; }这是一个16：9的矩形
注意：如果屏幕宽度较大高度较小时，则可以用vmax。如果需要随意切换时，可以通过js来控制。
总结：
两种方法各有利弊，方法一：兼容性好，代码相对长点，理解也比较困难点。方法二：代码简洁，理清定义后便非常容易理解，但是兼容性相对差一些。不过兼容性啥的，怕什么哈哈哈。
以上就是如何实现图片在页面中宽高一直保持16：9的比例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612745.html
微信扫一扫 
支付宝扫一扫 
