css背景图片拉伸100%，css背景图片宽度自适应

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

背景图宽度自适应方法：添加css样式background-size：100%；它的意思是规定背景图像的尺寸，但这个css样式使用时需要注意，有些浏览器是不支持，比如IE要求9的版本才可以支持。

div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。

输入position：fixed； top： 0； left： 0；使整个div固定在屏幕的最上方和最左方。

既要宽度100%，又要不变形，这两个条件决定了图片的高度不能另外设置，只能跟随宽度的变化而变化，这样就无法保证完全覆盖剩余区域。

用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。

相关问答

Q1: 在css中设置图片的背景图,怎么设置图片纵向拉伸

首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。然后建立一个html文档，将它和背景图片放到一个文件夹中。编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。

background：url(../../config/img/Title.png) repeat-y；竖着铺 什么不加就是横竖平铺 如果你是想拉伸的话，竖着切一张几个像素宽的背景图（比如说宽2px，高990px这样的一张图），然后设置repeat-x，横向平铺。

背景图尺寸（以图片自身大小来填充元素，即auto值）：程式码如下：background-size5{ background-size：auto；} /css 背景图片如何拉伸，不是平铺。

可以通过cover和contain来对图片进行伸缩。

Q2: 浏览器缩小拉伸,body背景图如何100%填充

1、如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用body，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。

2、因为你下面的那个div的宽度是800PX啊~超出了当前浏览器的宽度，所以会出现你这样的情况，宽度100%只是相对于浏览器来说的，就是说浏览器一整屏的宽度，超出了的部分就不算了或者叫做200%、300%或者更多。

3、使用此代码：img border=0 src=/jpg width=100% height=100% style=position： absolute；left：0px；top：0px；z-index： -1或者background-size：cover。

4、首先我们用Dreamweaver软件做一个html文档，当然用其他编辑器也可以。然后给body设置一个背景图片，这里小编给body加了一个高度，以便能看到图片。然后先在浏览器中预览一下效果。

关于css背景图片拉伸100%和css背景图片宽度自适应的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。