前端入坑紀 21

美好的禮拜天，今天來個先前都有用到的圖片自適應比例技巧，因為之前的文章中都用到過......

OK，first things first！項目鏈接

HTML 結構

<p>
    div.one 自動被圖片撐開
</p>
<div class="one dvs">
  ![](http://upload-images.jianshu.io/upload_images/4732938-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">
  ![](http://upload-images.jianshu.io/upload_images/4732938-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">
![](http://upload-images.jianshu.io/upload_images/4732938-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;
}

其實最有用的還是對嵌入視頻的來說，比例對了，就沒有那黑邊了