在CMS中管理砌体网格图像的最佳方法？

Question

我有一个在CMS中使用砌体/包装js插件的砌体网格,用户管理图像非常麻烦,因为它们需要精确的比例才能获得正确的砖效果并填补所有空白,这对于cms的非技术用户更新或更改图像.此插件的初始化速度也很慢.

有没有现代的html解决方案或更新的js插件,现在有更新的技术,如可能flexbox或css网格,这将给我相同的砌体效果,而不必预先定义每个图像的比例,使其成为cms的用户可以只是上传任何大小的图像,它将适合包装布局,而无需定义它在布局中的位置或在上传时调整图像大小？

请注意,这是在自定义cms中,所以我正在寻找不像WordPress那样的cms平台特有的答案.

Answer 1

Rafaela Ferro写了一篇关于媒体的文章,其中详细介绍了使用CSS网格创建砖石风格的图像布局,从而实现了极大的灵活性.它不到30行CSS,并且响应也很好.

通过利用图像object-fit: cover,图像可以是任何大小,网格将处理其余部分.用户可能想要做的唯一事情是确保图像在放大到中心时看起来很好(由于对象适合).

代码直接取自她的文章:

.gallery { 
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 250px 150px;
  grid-auto-flow: dense;
}

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

@media (min-width: 480px) {
  .gallery .item:first-child {
    grid-area: 1 / 1 / span 2 / span 2;
  } 
  
  .gallery .item:nth-child(3n) {
    grid-column: span 2;
  }
}

<div class="gallery">
  <div class="item">
    <img src="https://images.dog.ceo/breeds/weimaraner/n02092339_431.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/leonberg/n02111129_17.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/borzoi/n02090622_5890.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/elkhound-norwegian/n02091467_3090.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/dingo/n02115641_7158.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/bluetick/n02088632_2149.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/bluetick/n02088632_1625.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/ridgeback-rhodesian/n02087394_9369.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/dachshund/dog-495133_640.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/chow/n02112137_8212.jpg">
  </div>
</div>