网页图片与视频自适应比例大小

前端入坑纪 21

美好的礼拜天，今天来个先前都有用到的图片自适应比例技巧，因为之前的文章中都用到过......

OK，first things first！项目链接

HTML 结构

<p>
    div.one 自动被图片撑开
</p>
<div class="one dvs">
  ![](https://img.haomeiwen.com/i4732938/e6540c3acac197fb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
<p>
    div.two 自动被padding撑开,所以 img要绝对定位;<br>
    padding:30% 50% 可以用来控制宽高比<br>
</p>
<div class="two dvs">
  ![](https://img.haomeiwen.com/i4732938/d13d93bc11e0038a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
<div class="twoVd dvs">
  <iframe src='http://player.youku.com/embed/XMjc5MTgzOTQwNA==' frameborder=0 'allowfullscreen'></iframe>
</div>
<p>
    div.three 自动被相同padding撑开,那就是个正方形
</p>
<div class="three dvs">
![](https://img.haomeiwen.com/i4732938/1d5306ce7505b2d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>

请忽略html里的img代码吧，被上传转义了。入正题，这个方法虽然很好用，不过如果不支持transform属性的浏览器就难说了。所以，你懂得～

CSS 结构

.dvs{
  border:2px solid #666;
    margin:0 auto;
}
img{
    width:100%
}
.one{
    
  background-color:skybule;
}
.two{
    width:0;
    height:0;
    padding:30% 50%;    
  background-color:pink;
    position:relative;
    overflow:hidden;
}
.two img,.three img{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%)
}
.twoVd{
    width:0;
    height:0;
    padding:25.6% 40%;  
        background-color:pink;
    position:relative;
    overflow:hidden;
}
.twoVd iframe{
        position:absolute;
    height:100%;
    width:100%;
    top:50%;
    left:0;
    transform:translateY(-50%)
}
.three{
    width:0;
    height:0;
    padding:30%;    
  background-color:pink;
    position:relative;
    overflow:hidden;
  background-color:lightgrey;
}

其实最有用的还是对嵌入视频的来说，比例对了，就没有那黑边了