html - CSS FlexBox水平 list

我正在尝试让我的应用看起来像这样：

https://stock.adobe.com/search?load_type=search&k=dogs&native_visual_search=&similar_content_id=

这是我的HTML：

<div class = "container">
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/240"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/240/paris"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/500/cat"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/300/dog"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/520/240/girl"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/240/boy"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/320/240/piano"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/1020/400/rome"/>
  </div>
  <div class = "item">
    <img class = "image" src = "https://loremflickr.com/100/40/london"/>
  </div>
</div>

这是我的CSS：

.container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: flex-end;
}

.container .item {
    margin: 10px;
    flex: auto;
}

.container .image {
    display: block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 180px;
    object-fit: cover;
    min-width: 100%;
}

这是jsfiddle：https://jsfiddle.net/qq137/7rsk5tfc/

我在实现过程中注意到的几个问题是，当我使用object-fit: cover时，它会切除部分图像并将图像拉伸到div的边缘。我尝试使用object-fit: contain捕获整个图像。但是，它在图像周围产生了很多空白，我想避免这些空白。有人知道如何使我的图像列表看起来像我在上面的链接中共享的图像列表吗？任何帮助深表感谢

最佳答案

Adobe-Site通过用+-5%更改图像的整体大小来解决此问题，这给人的印象是图像更适合。这是使用嵌入到网站中的一些JavaScript来完成的。

据我所知，纯CSS不允许您以这种方式自动调整容器（或图像）的大小...

基于：


https://www.w3schools.com/css/css3_object-fit.asp
https://www.w3.org/TR/css3-images/
https://www.w3schools.com/css/css3_flexbox.asp

关于html - CSS FlexBox水平 list ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47276794/