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

【问题标题】：autofit image when browser window resize浏览器窗口调整大小时自动调整图像
【发布时间】：2013-04-08 13:13:17
【问题描述】：

我希望当我的浏览器窗口调整大小时我的图像大小不会改变，它应该覆盖所有 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>

【问题讨论】：

作为一个提示，清理你的代码。删除 HTML 标记上的样式属性并将所有样式移动到顶部的

标签： html css image resize scrollbar

【解决方案1】：

您可以对图像使用引导响应类，

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

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

background-size: 100%;

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

【讨论】：

它不起作用，亲爱的......运行我的代码然后你“会理解我的问题
你用的是什么浏览器？