背景图片高度自适应

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%;
}

 

 

 

你可能感兴趣的:(h5)