CSS开发之响应式宽高等比缩放

需求

最近需要实现这样的效果

其中图片是响应式宽高等比缩放的

虽然设置图片宽度和屏幕宽度成比例是有效的

width: w%; /* 有效 */

但是设置图片高度和图片宽度成比例却是无效的

height: h%; /* 无效 */

因为

宽高百分比是相对于其父元素的

虽然父元素宽度是已知的但是

父元素高度默认是根据内容自适应的

所以高度百分比是无效的

最终我们实现的思路如下

这里我们用到了Box Model

内边距的百分比是相对于盒子的宽度

<div>
  
</div>

div {
  width: 100%;
  padding-top: 40%;
  background-color: red;
}

此时自适应且宽高比是10:4 效果详见JSFiddle aspect-radio-01

这里我们利用了position

<div>
  ![](http://upload-images.jianshu.io/upload_images/2180450-3d151d1d201650e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>

div {
  width: 100%;
  padding-top: 40%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

此时图片宽高比完全随父元素等比缩放效果详见JSFiddle aspect-radio-02

最后我们扩展该问题实现这样的效果

aspect-radio-01.png

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

.item {
    float: left;
    width: 46%;
    height: 0;
    margin: 10px 2%;
    padding-bottom: 30%;
    background-color: #dbe0e4;
}

更多文章, 请支持我的个人博客