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

前端入坑纪 21

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

OK，first things first！项目链接

HTML 结构

    div.one 自动被图片撑开


  ![](http://upload-images.jianshu.io/upload_images/4732938-e6540c3acac197fb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


    div.two 自动被padding撑开,所以 img要绝对定位;

    padding:30% 50% 可以用来控制宽高比



  ![](http://upload-images.jianshu.io/upload_images/4732938-d13d93bc11e0038a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


  


    div.three 自动被相同padding撑开,那就是个正方形


![](http://upload-images.jianshu.io/upload_images/4732938-1d5306ce7505b2d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

请忽略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;
}

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