css 显示填充网格的照片-不考虑纵横比

bvhaajcl 于 2023-04-13 发布在其他

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

我正在尝试创建一个照片库作为react中的家庭学习项目。我能够在网格中显示照片：

使用此代码：

const Container = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
justify-items: center;
align-items: center;
margin: 0;
padding: 0;
`

const PhotoWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* set a fixed height for each grid item */
`

const Photo = styled.img`
max-width: 100%;
max-height: 100%;
object-fit: contain;
height: 100%; /* make the image fill the height of the grid item */
`

const Home = () => {

       return (
        
            <Container>
                {imagesData.map((image) => <PhotoWrapper><Photo src={image.imageUrl} /></PhotoWrapper> )}
            </Container>
           
    )
}

export default Home

这几乎是我想要的，但是……我希望它更像Flickr。谁做了一个惊人的工作，在填补网格没有拉伸照片（我可以告诉）。
示例：https://www.flickr.com/prints/discover

他们是如何设法保持行的长度和高度相同的？是否有一些很棒的CSS技巧？或者可能有一个后端工作负载来计算大小，看看什么适合？我如何才能像那样显示我的网格？
编辑：接受的解决方案是惊人的，我需要什么。这是它看起来像我现在：

唯一的问题是当一小部分照片被放到最后一行时。它们被裁剪了很多，很难看清它们是什么。有没有：last type类可以帮助解决这个问题？

css

来源：https://stackoverflow.com/questions/75981738/displaying-photos-that-fill-the-grid-regardless-of-aspect-ratio

1条答案

按热度按时间

33qvvth11#

一个简单的解决方案是使用object-fit和flex-wrap。请注意，如果图像不适合，则仅显示图像的一部分。
首先，我们需要一个#gallery和多个.item：

<div id="gallery">
  <div class="item">
    <img src="https://www.example.com/img.png">
  </div>
  <!-- ... -->
</div>

由于无法预测图像的数量和宽度，我们将#gallery设置为flex-wrap: wrap容器。

#gallery {
  display: flex;
  flex-wrap: wrap;
}

然后，我们允许.item s在其行上任意扩展，该行具有固定的高度100px或您选择的其他值：

.item {
  flex: 1 1 auto;
  height: 100px;
}

最后，为图像设置object-fit: cover。这与height: 100%和width: 100%一起确保它们总是接触两侧并溢出其他两侧：

.item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

试试看：
(The最后的图像可能有点太宽，因为我们显示的图像数量有限，但通常使用infiniscroll来克服这个问题。

/**
 * Randomly add 15 - 44 images, of which sizes are in range 100 - 499.
**/

const gallery = document.querySelector('#gallery');

const l = 15 + Math.random() * 30 | 0;

for (let i = 0; i < l; i++) {
  const wrapper = document.createElement('div');
  const img = document.createElement('img');
  
  const [width, height] = [0, 0].map(
    _ => 100 + Math.random() * 400 | 0
  );
  
  wrapper.classList.add('item');
  img.src = `https://picsum.photos/${width}/${height}`;
  
  wrapper.appendChild(img);
  gallery.appendChild(wrapper);
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.item {
  flex: 1 1 auto;
  display: flex;
  height: 100px;
}

.item img {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

body {
  background: #000;
}

<div id="gallery"></div>

赞(0）回复(0）举报 2023-04-13

我来回答

css 显示填充网格的照片-不考虑纵横比

1条答案

相关问题

热门标签

最新问答