浏览器窗口调整大小时自动调整图像

i want that my image size doesnt change when my browser window resize and it should cover all the div content .. the problem is when i resize my window background image only cover showed browser area and its look like my content is out of its div..its okey if there is scollbar..but doesnt able to find solution even with that..plz help..

我希望我的图像大小不会改变我的浏览器窗口调整大小,它应该涵盖所有div内容..问题是当我调整窗口背景图像时,只有封面显示浏览器区域,它看起来像我的内容超出其div。 .its okey如果有scollbar ..但即使有那个..plz帮助也无法找到解决方案..

here goes my code...

这是我的代码......

<style>
div{
 background-width:100%; 
 background-image: url('back5.jpg');
 background-id:back5;
 background-overflow-x:scroll;
}

</style>

</head>

<body style="margin:0px;overflow-x:scroll">

    <div>

    <img src="logo.gif">





    <label  style="type=text/css;position:absolute;left:600px;top:18px"/>

            <font size="5" style="color:#ffffff">E-mail:</font>

    </label>

    <label  style="type=text/css;float:right;position:absolute;left:600px;top:48px"/>

            <font size="5" style="color:#ffffff">Password:</font>

    </label>

    <Input type="text" name="_email" id="e_mail"  style= " type=text/css;-webkit-border-radius: 7px;
                                                          -moz-border-radius: 7px; border-radius: 7px;
                                                           background-color:#D8D8D8;
                                                           float:center;position:absolute;
                                                           left:720px;top:18px;
                                                           width:400px; height:25px"/>

    <Input type="text" name="_password" id="pass_word"  style="type=text/css;-webkit-border-radius: 7px; -moz-border-radius: 7px;
                                                                border-radius: 7px; background-color:#D8D8D8;
                                                                float:center;position:absolute;
                                                                left:720px ;top:48px; width:400px;
                                                                height:25px"/>

    <input type="submit" value="LogIn" style="type=text/css; float:center;position:absolute;
                                             left:870px ;width:600px; top:80px; width:60px;
                                             height:25px"/> 

    </div>



</body>

2 个解决方案

#1

you can use bootstrap responsive class for images,

你可以使用bootstrap响应类来处理图像,

get bootstrap and include bootstrap.css to your code.

获取引导程序并将bootstrap.css包含在您的代码中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

then you can use

那你可以用

<img src="..." class="img-responsive" alt="Responsive image">

#2

If I understand correctly you can try a well known CSS3 property called background-size.

如果我理解正确,你可以尝试一个名为background-size的众所周知的CSS3属性。

background-size: 100%;

This will only work in modern browsers. More info can be found here: https://developer.mozilla.org/en-US/docs/CSS/background-size

这只适用于现代浏览器。更多信息可以在这里找到:https://developer.mozilla.org/en-US/docs/CSS/background-size

#1