css Flex框中的图片在Chrome和Firefox中看起来不一样-如何让它们看起来像Firefox？

shyt4zoc 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(129)

预期结果：

在Chrome中看起来不一样。我试着给图片添加flex: 0 0。但是看起来我不能影响它们的大小。我能让它看起来像在Firefox中一样，没有div Package 器和设置图片的大小吗？

div {
  display: flex;
  gap: 5vw;
}

img {
  width: 100%;
  height: auto;
}

<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>

下面是jsfiddle：https://jsfiddle.net/ogbva8n5/
UPD：当我在像素中设置任意宽度的图片时，它们就开始按照它们应该的方式工作了。看起来像是Chrome中的一些bug，不是吗？

css

来源：https://stackoverflow.com/questions/75338057/images-in-a-flex-box-looks-different-in-chrome-and-firefox-how-to-make-them-lo

1条答案

按热度按时间

8yparm6h1#

您可以通过隐藏溢出来执行此操作：

div {
  display: flex;
  flex-wrap: nowrap;
  gap: 5vw;
}

div > img {
overflow: hidden;
}

<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>

赞(0）回复(0）举报 2023-02-06

我来回答

css Flex框中的图片在Chrome和Firefox中看起来不一样-如何让它们看起来像Firefox？

1条答案

相关问题

热门标签

最新问答