Question

我是HTML和CSS的新手，遇到一个问题，当我调整页面大小时，元素会变得狂暴。我已经尝试过创建主包装并添加最大宽度和高度的所有内容，但都无济于事。这是我在CSS中的代码，以便您可以查看。

body {
  background-image: url(3eMAHaa.jpg)
}

div.header {
  border: 1px solid black;
  border-radius: 50px;
  padding-top: 26%;
  padding-bottom: 26%;
  padding-left: 10%;
  padding-right: 10%
}

h1 {
  ;
  position: absolute;
  top: 30%;
  left: 40%;
  color: #FF2B24;
  font-family: helvetica
}

.someimage {
  position: absolute;
  top: 43%;
  left: 32%
}

div.navbox {
  border: 1px solid black;
  border-radius: 50px;
  padding-top: 70px;
  padding-bottom: 70px;
  padding-left: 500px;
  padding-right: 500px;
  position: absolute;
  top: 1%;
  right: 2%
}

img.about {
  border: 1px solid gray;
  position: absolute;
  right: 80%;
  top: 35%
}


}
img.location {
  border: 1px solid gray;
  position: absolute
}
img.contact {
  border: 1px solid gray;
  position: absolute;
  right: 15%;
  top: 35%
}

Answer 1

删除所有填充代码，然后不会调整大小

Answer 2

别介意的人，想通了。我不得不设置一个更大的DIV作为父母，然后将所有其他元素更改为相对定位，这样他们就不会动起来了。这很麻烦，但确实有效！ :)。此外，尝试使用像素而不是％，因为百分比不是固定值，并且在缩放时会使内容变得疯狂。

如何在我更改页面上的缩放时停止元素调整大小

2 个答案: