欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

背景图片高度自适应

程序员文章站 2022-05-01 12:26:09
...

1. 使用padding-top

 

实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现,padding-top取值百分比是相对于包含块的宽度而定。
因为图片尺寸和屏幕尺寸不匹配等原因,可能会出现背景图片显示不完全等情况,我们先用一个小的div来演示一下。
    代码如下,限制一个div的最大宽度为750px,根据图片尺寸设定padding-top: 89%,这个百分比是高度/宽度

 

.case-h-bg{
				
                background-image: url(img/case_bg.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		padding-top: 28%;
}