CSS设置背景图宽度100%,高度自适应

html-css014

CSS设置背景图宽度100%,高度自适应,第1张

padding-top= (高度/宽度)*100%即图片的高度与宽度的比例,因此就能实现背景图宽度100%,高度自适应

为了达到更好的效果再配合cover和center

有两种办法可以实现这个功能:

1、采用设置高度的值为百分比,如

height:100%

此时高度就会随着父元素的高度二改变。

2、采用使用js获取页面的高度来实现高度的动态变化

如获取:页可见区域高: document.body.clientHeight

然后获取该样式高度后设置该高度为以上值。补充:

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

注意:一般实际开发过程中一般是不设置高度为具体的值的,一般是设置高度随着内容的多少而改变。