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%; }
到此基本就可以实现无论屏幕如何缩放,背景图都可以根据屏幕自适应大小了。
- 点赞
- 收藏
- 关注作者
评论(0)