提问者:小点点

如何让我的网站在放大缩小时不变得失真?


我目前正在一个网站上工作,我想知道我怎样才能使我的网站不失真,当我放大和缩小。 以150%的速度缩放会使所有的导航按钮聚集在一起,导致它们彼此重叠。 我尝试使用媒体标签,证明它在其他设备上很好地工作,然而,它似乎不工作时,放大和缩小。 (注:这是我的第一个网站,所以你可以理解我的困惑)。 下面是我的代码:

HTML(&S CSS:

null

*{
  margin: auto;
  padding: auto;
  box - sizing: border - box;
  font - family: Century Gothic;
}

header {
  height: 15 % ;
  background - size: cover;
  background - position: center;
  background - color: #ebebeb;
  border - bottom: 5 px solid# A9A9A9;
}

@media(min - width: 768 px) and(max - width: 991 px) {
  header {
    height: 8 % ;
  }
}

@media(min - width: 768 px) and(max - width: 1199 px) {
  header {
    height: 13.5 % ;
  }
}

@media(min - width: 960 px) and(max - width: 1400 px) {
  header {
    height: 11.5 % ;
  }
}
html,
body {
  /*  background: #000000;*/
  font - size: .80e m;
  /* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
  margin: 0 % ;
  padding: 0 % ;
  color: #696969;
    height: 100%;
    width: 100%;
    }

    /*Carousel*/

    .carousel-container {
    width: 70%;
    max-height: 800px;
    margin: auto;
    margin-top: 1%;
    overflow: hidden;
    border: 5px solid white;
    }

    .carousel-slide {
    display: flex;
    width: 100%;
    height: 400px;
    }

    # prevBtn {
    position: absolute;
    top: 40 % ;
    z - index: 10;
    left: 20 % ;
    font - size: 50 px;
    color: white;
    opacity: 0.5;
    cursor: pointer;
  }

  #
  prevBtn: hover {
    color: black;
  }

  #
  nextBtn {
    position: absolute;
    top: 40 % ;
    z - index: 10;
    right: 20 % ;
    font - size: 50 px;
    color: white;
    opacity: 0.5;
    cursor: pointer;
  }

  #
  nextBtn: hover {
    color: black;
  }
<header>
  <div class="main">
    <div class="logo-text">
      <h1 class="text-logo">TITLE</h1>
    </div>
    <div class="menu-container">
      <nav>
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="store.html">Store</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
  </div>
  </div>
</header>
<div class="page-wrapper">

  <!--Image Slider-->

  <div class="back-color">
    <div class="carousel-container">
      <i class="fa fa-angle-left" id="prevBtn"></i>
      <i class="fa fa-angle-right" id="nextBtn"></i>
      <div class="carousel-slide">
        <img src="./img/testpic3.jpg" id="lastClone" alt="Could not load">
        <img src="./img/testpic1.jpg" id="first" alt="Could not load">
        <img src="./img/testpic2.jpg" alt="Could not load">
        <img src="./img/testpic3.jpg" id="last" alt="Could not load">
        <img src="./img/testpic1.jpg" id="firstClone" alt="Could not load">
      </div>
    </div>
  </div>

null

有原因我包括图像滑块是因为它扭曲以及。 当我缩小时,你可以看到我隐藏的其他图片。

任何帮助都会有帮助。 提前谢谢!


共1个答案

匿名用户

我认为缩放的问题是,你用百分比指定了尺寸,因为你的元素会根据未定义的尺寸改变自己。 如果使用PXVW,问题将得到解决。。。 VW和VH也是百分比,但它们与视图端口的尺寸有一个比率,这可以防止它们在变焦时变形。 这是我的看法!

%相对于父元素,
,而vwvh相对于视图端口。

有关详细信息,请查看此链接