首页 文章

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

提问于
浏览 次
0

我有这个图像网格 . 我希望两者之间没有间距 . 宽度也应该是父母的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%;
}
html css flexbox

1 回答

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

    回复于

相关问题