我的前端组件 ---- 16:9固定宽高比例的div

William_Sang 发布于2019-08-23 12:29 / 2480人阅读

摘要：宽高保持的比例。固定宽高比相对于可视窗口的宽度或高度中较小的那个，被均分为单位的例当宽度是，高度是，那么则是相对于宽度的这是一个的矩形注意如果屏幕宽度较大高度较小时，则可以用。

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

实现：

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




    固定宽高比16:9
    



    
        这是一个16：9的矩形

方法二：利用vmin来实现。




    固定宽高比16:9
    



    
        这是一个16：9的矩形

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

总结：
两种方法各有利弊，方法一：兼容性好，代码相对长点，理解也比较困难点。方法二：代码简洁，理清定义后便非常容易理解，但是兼容性相对差一些。不过兼容性啥的，怕什么哈哈哈。

私有云专线服务固定宽高 DIV固定固定div 前端组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98593.html

我的前端组件 ---- 16:9固定宽高比例的div

摘要：宽高保持的比例。固定宽高比相对于可视窗口的宽度或高度中较小的那个，被均分为单位的例当宽度是，高度是，那么则是相对于宽度的这是一个的矩形注意如果屏幕宽度较大高度较小时，则可以用。目标：遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。实现：方法一：这也是比较经典的一个方法，利用padding-bottom来实现。固定宽高比16:9 ...

张迁 2019-08-29 17:02 评论0 收藏0
我的前端组件 ---- 16:9固定宽高比例的div

摘要：宽高保持的比例。固定宽高比相对于可视窗口的宽度或高度中较小的那个，被均分为单位的例当宽度是，高度是，那么则是相对于宽度的这是一个的矩形注意如果屏幕宽度较大高度较小时，则可以用。目标：遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。实现：方法一：这也是比较经典的一个方法，利用padding-bottom来实现。固定宽高比16:9 ...

xingpingz 2019-08-02 11:46 评论0 收藏0