老师，在背景图片引入，使用padding-top来撑开这里还是没理解。

高度/宽度和width。

慕UI4313976 2022-04-11

源自：移动Web开发常见问题 2-4 移动端图片

25

收起

1回答

卡布琦诺回答被采纳获得+3积分 2022-04-11 10:46:10

同学你好，padding-top这种解决方案适用于，引入的背景图片宽高是不固定的情况。计算方式为图片的高度/图片的宽度 * 100%，如下图所示：

比如这里的padding-top值39.7869%=（图片高度224px/图片的宽度536px）*100%得到的。

注意：这里要配合background-size:cover; 使用效果更佳。

祝学习愉快~

WYW265672 #1

padding-top39.7869%为什么是宽度的39.7869%，不明白，我知道39.7869是用图片宽高比算来的，但是不知道padding-top设置百分比是相对谁

2022-07-13 20:12:52
卡布琦诺回复 WYW265672 #2

同学你好，这里的padding-top是相对于宽度的，可以理解为是使用padding-top统一撑开背景图片的高度。
祝学习愉快！

2022-07-14 09:38:17

相似问题

背景图片和背景颜色同时设置时，背景图片会覆盖背景颜色

还是没弄明白为什么要用padding-top弄出个正方形

老师为什么我的网页背景图加载不出来？

老师，关于背景图片问题，帮忙解决下，我做了注释

还是发现不了代码231行bottom 修改背景色为什么没变。padding-top也没改

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15661 份
解答问题 17891 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

200 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载