如何在放大时防止网页的前半部出现白色边框?

huangapple go评论56阅读模式
英文:

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

enter image description here

答案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;
}

huangapple
  • 本文由 发表于 2023年5月22日 22:04:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307016.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定