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

举报
闫小样丶 发表于 2020/07/05 23:07:55 2020/07/05
【摘要】 我们在做项目的过程中,常常需要将一些图片做成背景图。但是在页面缩放的时候,会发现背景图并没有自适应去缩放。我在做项目的过程中也同样遇到了这个问题,查了一些资料发现通过padding可以实现背景图片高度按比例自适应。首先大概说一下原理:(1)高度百分比我们将高度设置成百分比时,其中的高度是基于父元素来定的,设置成50%,就是将该元素高度设置成父元素的高度值*50%。但是高度设置为百分比时,往往...

我们在做项目的过程中,常常需要将一些图片做成背景图。但是在页面缩放的时候,会发现背景图并没有自适应去缩放。我在做项目的过程中也同样遇到了这个问题,查了一些资料发现通过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%;
}

image.png

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。