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

网友投稿 1685 2022-05-30

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

首先大概说一下原理:

(1)高度百分比

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

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

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

(2)使用 padding 代替高度

CSS | 如何使用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:

CSS:

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

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

CSS

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Pick of the Week'19 | 图数据库 Nebula 第 47 周看点-- insert 的二三事
下一篇:【技术教程】【微码开发】微码开发入门 - 环境搭建
相关文章