Question

我想让我的应用看起来像这样：

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。但是，它会在图像周围创建大量的空白区域，这是我想要避免的。任何人都知道如何使我的图像列表看起来像我在上面的链接中共享的那个？非常感谢任何帮助

Answer 1

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

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

基于：

CSS FlexBox水平Mansory

1 个答案: