Question

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

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

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

＆＃13;

<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>

＆＃13;

Answer 1

不使用JavaScript：

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

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

1 个答案: