CSS 的奇技工巧：4行属性写出等比例盒子

一个项目中须要用到一个广告位的轮播图效果，而这个轮播图位置须要根据不一样设备的尺寸进行缩放从而保持相同的比例。

最开始使劲琢磨发现用 width + height 属性是实现不了这种效果的，非得用 JS 才能达到这种效果吗？终于发现有前人早已解决过这个问题，这里权当本身吸取学习，所以记录下来。

HTML

<div class="box">
    <img src="...">
</div>

CSS

.box
{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

img
{
    width: 100%;
}

演示效果

---

仔细想想这不过是 CSS 中最基础的内容，没有什么新颖华丽的内容。可是其中值得思考的东西颇多，不妨读者也想想：

• 为何父元素 .box 的 height 属性要设置为 0
• 子元素 img 为何不设置 height 属性

注意

padding 属性的继承关系