Question

我有这个图像网格。我希望两者之间没有间距。宽度也应该是父母的100％。每列的大小相同，在这种情况下为20％。 flex负责这一点。但是我想要高度与主要纵横比，但这就是问题所在。当我放大和缩小（或调整窗口大小）时，图像的高度保持不变。它需要与图像的当前宽度具有相同的宽高比。

有谁知道如何解决这个问题？

HTML

<div class="image-grid-container">
  <div class="image-grid">
    <img src="images/me/img01.png" />
    <img src="images/me/img02.png" />
    <img src="images/me/img03.png" />
    <img src="images/me/img04.png" />
    <img src="images/me/img05.png" />
  </div>
  <div class="image-grid">
    <img src="images/me/img06.png" />
    <img src="images/me/img07.png" />
    <img src="images/me/img08.png" />
    <img src="images/me/img09.png" />
    <img src="images/me/img10.png" />
  </div>
  <div class="image-grid">
    <img src="images/me/img11.png" />
    <img src="images/me/img12.png" />
    <img src="images/me/img13.png" />
    <img src="images/me/img14.png" />
    <img src="images/me/img15.png" />
  </div>
</div>

CSS

.image-grid-container .image-grid {
    display:flex;
}
.image-grid-container .image-grid img {
    width:100%;
}

Answer 1

您应该在div中设置每个图像。

这样的事情：

<div class="img">
  <img src="http://placehold.it/200x200" />
</div>

然后在CSS中

.image-grid-container .image-grid .img img {
  width: 100%;
}

此处的完整示例：https://jsfiddle.net/cvru2yL5/

如何在CSS中的flexbox中保持img的宽高比？

1 个答案: