使用 CSS 完成的网页缩放会导致失真

使用下面的代码（有人慷慨地帮助了我，因为我是CSS的新手！），当我缩小浏览器窗口的宽度时，图像和链接会失真。

如果我缩小浏览器窗口的高度，滚动条一旦低于图像宽度就会出现（这就是我想要的）。因此，缩小高度可以正常工作，但缩小宽度会导致失真。我希望链接和图像始终保持在中间，但是一旦浏览器窗口变得很小以包含它，我希望滚动条发挥作用。

任何帮助将不胜感激！这是代码...

<html>
<head>
  <style>
    html {
      height: 100%;
      width: 100%;
      display: flex;
    }
    body {
      margin: auto;
    }
    nav {
      counter-reset: links;
      display: flex;
      padding: 0 1em;
    }
    img {
      margin: 1em;
    }
    ul {
      padding: 0;
      margin: auto;
      list-style-type: none;
    }
    .a_font {
      font-size: 25px;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
    </ul>
    <img src="myimage.png" width="250" height="250" />
    <ul>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
      <li><a class="a_font" href="">My Link Here</a>
      </li>
    </ul>
  </nav>
</body>
</html>

不使用JavaScript：

body {
    margin:auto;
    min-width: 600px; //or some other value
    overflow: scroll;
}

相关内容

最新更新

热门标签：