Question

当我缩小窗户或不同分辨率设备的尺寸时，是否有人能够弄清楚如何保持图库的图像离开图像框。

问题：

代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>BlackBird </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/functions.js"></script>
  </head>
  <body>
    <nav>
    </nav>
    <header class="background">
      <div class="logo"></div>
    </header>
    <section class="conteudo">
      <article>
      </article>
      <div class="bubble-wrapper">
        <article>
        </article>
      </div>
      <article>
        <hr>
        <h1>Galeria</h1>
      </article>
      <div class="img-box">
          <img src="images/gallery/1.jpg">
          <img src="images/gallery/2.jpg">
          <img src="images/gallery/8.jpg">
          <img src="images/gallery/4.jpg">
          <img src="images/gallery/6.jpg">
          <img src="images/gallery/7.jpg">
      </div>
  <footer>      
  </footer>
</html>

CSS：

.img-box {
  width: 100%;
  height: 400px;
  background: black;
}
.img-box img {
  opacity: 0.6;
  width: 15%;
  display: inline-block;
  padding-left: 18px;
  padding-top: 37px;
}
.img-box img:hover {
  opacity: 1;
}

Answer 1

根据您发布的代码导致换行的原因很可能是每个img的宽度为15％PLUS 18px。当缩小窗口时，这加起来比窗口宽度宽，因此图像会换行到第2行。

第二行图像延伸到黑框之外的原因是因为您在img-box元素上设置了400px的固定高度。

一种选择是在图像之间使用基于百分比的填充而不是固定的18px，并将img-box溢出设置为滚动，或允许其具有可变高度。

还要考虑使用媒体查询来调整不同屏幕宽度的布局，例如，当宽度较窄时，切换到单列图像，更改最大图像宽度，缩小缩略图等等。也可以使用CSS flexbox之类的东西。

响应式网页布局问题

1 个答案: