英文:
How can I prevent a white border from appearing on the first half of my webpage when zooming in?
问题
我在我的代码中有两个div,一个用于页面的第一部分,另一个用于其余部分,如下所示。问题是,当我放大页面时,第一页的左侧会出现一个大的白边,几乎可以理解为是为了在我放大页面时能够调整大小。而第二部分没有此问题。我还想补充一点,当我放大页面时,背景图像保持完全不变,也就是说没有任何扭曲。我该如何解决这个问题?
.firsthalf{
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg);
background-size: cover;
background-position: center;
min-width: 100%;
overflow-x: hidden;
}
.secondhalf{
background-color: black;
min-width: 100%;
display: table;
height: 4000px;
}
正如您所看到的,我已经尝试过修改overflow设置以及min和max宽度,但所有的努力都没有成功。 Codepen链接
英文:
I have two divs in my code- one for the first portion of my page and one for the rest as shown below. The issue is that when I zoom in, the first half of the page has a large white border appear to the right of it, almost as a way for it to be able to resize when I zoom in. This issue does not occur for the second half. I'd also like to add that when I zoom in, the background image stays the exact same, meaning no warping whatsoever. How do I fix this?
.firsthalf{
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg);
background-size: cover;
background-position: center;
min-width: 100%;
overflow-x: hidden
}
.secondhalf{
background-color: black;
min-width: 100%;
display: table;
height: 4000px;
}
As you can see, I have already tried modifying the overflow settings as well as both the min and max width but all my efforts have been to no avail. Codepen
答案1
得分: 0
以下是翻译好的部分:
"Both div's should be treated the same so don't mix display: table;
on one div, overflow hidden;
on another..."
"当你像这样更改你的 div 元素时,仍然需要考虑到你给定了固定宽度为 1000px 的 .ib 元素。将其更改为 max-width: 1000px;
"
.firsthalf{
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg);
background-size: cover;
background-position: center;
width: 100%;
overflow-x: hidden;
}
.secondhalf{
background-color: black;
width: 100%;
height: 4000px;
overflow-x: hidden;
}
英文:
Both div's should be treated the same so don't mix display: table;
on one div, overflow hidden;
on an other...
When you change your div's like this you still need to account for the .ib elements you gave a fixed width of 1000px; Change that to max-width: 1000px;
.firsthalf{
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg);
background-size: cover;
background-position: center;
width: 100%;
overflow-x: hidden
}
.secondhalf{
background-color: black;
width: 100%;
height: 4000px;
overflow-x: hidden;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论