CSS | 如何使用padding代替高度实现背景图片高度按比例自适应

我们在做项目的过程中，常常需要将一些图片做成背景图。但是在页面缩放的时候，会发现背景图并没有自适应去缩放。我在做项目的过程中也同样遇到了这个问题，查了一些资料发现通过padding可以实现背景图片高度按比例自适应。

首先大概说一下原理：

（1）高度百分比

我们将高度设置成百分比时，其中的高度是基于父元素来定的，设置成50%，就是将该元素高度设置成父元素的高度值*50%。但是高度设置为百分比时，往往是不生效的！高度还是0，这是什么原因造成的？道理很简单，那就是父元素的高度也为0。

所以这就需要讲到浏览器对宽度及高度是如何计算的。浏览器在计算有效宽度时会考虑浏览器窗口的宽度，如果没有设置绝对宽度，就会自动将页面内容横向平铺填满整个窗口。然而浏览器并不计算内容的高度，除非内容超过了视窗高度，形成滚动条。或者给页面设置一个绝对高度，不然的话，浏览器就会将内容按文档流往下堆砌，也就是高度值为缺省值auto。

所以如果基于缺省值auto来设置百分比高度的话，必定是无效高度。显然只需要给父元素指定一个绝对高度，就没什么问题了。可在实际应用当中，高度通常都不是固定的，所以不能把高度写死。

（2）使用 padding 代替高度

为什么需要使用内边距代替高度呢？

首先，内边距就是元素边框与元素内容之间的空白区域；所以内边距越来越大时，元素的高度也会不断增大。

假想一下，如果一个元素的内容为空，内边距的高度是不是就是该元素的高度呢？

答案是肯定的，那我们可以将高度替换成内边距，并且以百分比设置它的值。

这里我们很多人都会有一个疑问，如果设置成百分比的话，一样是基于父元素成百分比的？

答案也是肯定的。是基于父元素，但是内边距padding是基于父元素的宽度的百分比的内边距。所以不管是 padding-left 和padding-right 还是 padding-top和 padding-bottom 都是基于父元素宽度的百分比。

（3）如何实现？

如果使用padding代替高度，我们应该使用padding-top或padding-bottom其中之一即可。那么该如何设置百分比呢？

首先，我们需要计算出图片的宽高比例，如案例中图片为534*300的图片，宽高比为534/300 = 1.78；

其次，假设将图片的宽度设置为100%，那么图片的高度就是534/300 = 100%/x，x = 56.17%;

最后得到的图片高度按比例缩放就是基于父元素宽度的 56.17%。

代码实现：

html：

<div class="box"></div>

CSS:

.box {
    width: 100%;
    height: 0;
    padding-bottom: 59.88%;
    background: url(img/img001.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

到此基本就可以实现无论屏幕如何缩放，背景图都可以根据屏幕自适应大小了。