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 属性的继承关系