Question

我创建了一个html页面和css，我整合了图像，我希望水平对齐图像直到页面水平，然后用图像填充页面。我试过这段代码：

<section class="main clearfix" style="display:inline;">
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="media" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work6.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work2.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

</section>

file css：

.work {
  display: inline;
  float: auto;
}
.work img {
  width: 10%;
  height: 200px;
  margin-left: -2px
}

它向我展示了这样的图片：

我的问题是，这使我成为右边的空白区域，然后回到线上。

Answer 1

只需使用flexbox

.main{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

Answer 2

除了马丁的解决方案，

如果您担心图像的大小比例，flex可能是最佳解决方案，或者

在object-fit: cover上使用img，但IE不支持。

使用background-size: cover;作为背景图片，但可怕的搜索引擎优化解决方案。

使用table display并在overflow: hidden; div处应用.work，但对响应能力非常糟糕。

您可能需要检查自适应图片主题，这有助于您了解图片如何影响您的网站效果，扩展程序，尺寸，以及您需要了解的开发优质产品的任何其他图像特征。

考虑到图像的显示，flex将是这种情况下的最佳解决方案。

使用html水平对齐图像

2 个答案: