Question

我知道这必须是非常简单的事情，但我无法找到适合我的解决方案。当我恢复浏览器时，我的所有页面元素都移动到位并缩小，我希望它们保持相同的位置并保持其大小。

到目前为止，这是我的代码：

<!DOCTYPE html> 

<html>

<head>

<title> What's in the picnic basket? </title>

<link href="home.css" type="text/css" rel="stylesheet"/>

<head>



     <body>

<div id="wrapper">


     <div class="titlebutton">
        <img src="images/Title.gif" id="titlebutton">
     </div>

     <div class="grass">
     <img src="images/Grasspatch.gif" id="grass">
     </div>




</div>

     </body>




</html>

和我的css：

body{
text-align: center;
}

#wrapper{
width: 500px;
margin: 0 auto;
position: absolute;
}



.titlebutton{position: fixed;
top: 35px;
left: 340px;
z-index: 1;}

#titlebutton{
height: 75%;
width: 75%;
}

.grass {
position: fixed;
top: 140px;
left: 400px;
}

#grass{
height: 80%;
width: 80%;
}

万分感谢那些帮助过的人，我是一个如此编码的人：P

Answer 1

您需要更改css中的position属性。修复元素后，它的属性将变为相对于浏览器窗口。因此，在您的情况下，当元素被修复时，它们的大小将调整为浏览器窗口的百分比。通过将它们设置为绝对值，它们将变为相对于它们的第一个静态父级。

发件人：

.titlebutton{ position: fixed; etc... } .grass { position: fixed; etc... }

要

.titlebutton{ position: absolute; etc... } .grass { position: absolute; etc... }

Answer 2

如果您希望它们保持相同的尺寸，则需要设置宽度而不使用％

例如：

.#grass{
    height: 400px;
    width: 400px;
 }

如果您希望它们稍微调整一下，但不能超过特定限制，您可以使用类似的内容：

#grass{
   height: 80%;
   width: 80%;
   min-width: 400px;
   min-height: 400px;
}

固定的位置会使它们保持在屏幕上的位置。固定在前100的左侧100将从屏幕角落的顶部和左侧100个

同样绝对不会总是从你的顶部100，因为它会在滚动后上升等。

当我恢复浏览器时，如何阻止页面元素缩小？

2 个答案: