Question

我想要在我的浏览器窗口调整大小时我的图像大小不会改变，它应该涵盖所有div内容.. 问题是，当我调整我的窗口背景图像时，只有封面显示浏览器区域，它看起来像我的内容超出它的div ..如果有scollbar ..但是甚至没有找到解决方案即使有..plz帮助。

这里是我的代码...

<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>

Answer 1

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

background-size: 100%;

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

Answer 2

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

get bootstrap并在您的代码中包含bootstrap.css。

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

然后你可以使用

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

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

2 个答案: