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

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

发布时间：2020-08-31 14:25:10

来源：亿速云

阅读：133

作者：小新

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

目标：

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

实现：

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

*{

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;

}*/

方法二：利用vmin来实现。

*{

margin: 0px;

padding: 0px;

}

.wrap{

width:100%;

}

/*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/

/*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/

.box{

height: 56.25vmin;

background: pink;

}

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

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