用css实现元素固定宽高比

admin

如何用css实现元素固定宽高比？
一、img、video 可替换元素的固定宽高比实现原理

指定img、video的宽度或者高度，另一边设置auto自动计算。比较简单。

html：

1. <div class="img-wrapper">
   
2.         <img src="" alt="">
   
3. </div>

复制代码

css：

1. .img-wrapper {
   
2.           width: 50%;
   
3. }
   
4. img {
   
5.         width: 100%;
   
6.         height: auto;
   
7. }

复制代码

二、普通元素固定宽高比实现原理：

利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。也可以使用calc函数来实现自动计算：calc(100%*9/16)。
不过这种方式不灵活，只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案aspect-ratio，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

html：

1. <div class="box">
   
2.         <div class="scale">
   
3.                 <div class="item">这是一个16：9的矩形</div>
   
4.         </div>
   
5. </div>

复制代码

CSS：

1. * {
   
2.        margin: 0;
   
3.        padding: 0;
   
4.        /* 清除默认样式 */
   
5.    }
   
6.    .box {
   
7.        width: 50%;
   
8.        /* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
   
9.    }
   
10.    .scale {
    
11.        width: 100%;
    
12.        padding-bottom: 56.25%;
    
13.        height: 0;
    
14.        position: relative;
    
15.    }
    
16.    .item {
    
17.        width: 100%;
    
18.        height: 100%;
    
19.        background-color: pink;
    
20.        position: absolute;
    
21.    }

复制代码

三、如果想要实现固定比例的img，但是img本身尺寸并不是我们想要的比例，那么可以通过设置background属性来填充盒子。

但是这种方式下，图片想要不变形，需要设置cover属性哦，但是这样同时有个缺陷，就是，图片不能显示完整。background: url() no-repeat center center/cover;

html：

1. <div class="box">
   
2.   <div class="img-wrapper"></div>
   
3. </div>

复制代码

css：

1. * {
   
2.                         margin: 0;
   
3.                         padding: 0;
   
4.                         /* 清除默认样式 */
   
5.                 }
   
6. 
   
7.                 .box {
   
8.                         width: 50%;
   
9.                         /* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
   
10.                 }
    
11. 
    
12.                 .img-wrapper {
    
13.                         width: 100%;
    
14.                         background: url() no-repeat center center/cover;
    
15.                         padding-bottom: 56.25%;
    
16.                         height: 0;
    
17.                 }
    
18. 
    
19.                 img {
    
20.                         width: 100%;
    
21.                         height: auto;
    
22.                 }

复制代码