css设置一张图怎么拉伸填满整个窗口

html-css07

css设置一张图怎么拉伸填满整个窗口,第1张

css设置一张图拉伸填满整个窗口，我们可以通过给这个图片设置width，height都给他们100%的高度和宽度，然后在就能看到填满全屏了，举个例子：

<html>

<head>

<style>

.class{

width:100%

//通过class来控制

height:100%

}

</style>

</head>

<body>

<div

id='content'>

<div

class='img'>

<img

src='图片地址'>

</img>

</div>

</body>

</html>

把html和body属性设置如下，就能自动充满页面：

html,body{    

    height:100%

    width:100%  

    padding:0px          

    border:0px        

    margin:0px                  

}

你好，如果只考虑高级浏览器，这个需求很好做，一句简单的css代码就可以搞定了：

html,

body {width: 100%height: 100%}

body {background-image: url(images/bg.png)background-size: cover}

其中background-size的取值：

cover：保证背景不变形填满窗口，超出部分被裁剪

contain：保证整张背景图片在body内部，不足区域留白

二者都能保证背景随窗口大小变化而自适应。

另，如果是要考虑到低级浏览器，这个稍微麻烦点，不过可以给你提供解决方案

设置一个背景img标签，fixed定位，填满整个窗口

window.onresize的时候，动态计算img标签的尺寸，同时改变定位位置

希望能解决你的问题，如有疑问欢迎追问，望采纳~