Question

我在CMS中使用砌体/包装js插件的砌体网格，用户管理图像非常麻烦，因为它们需要精确的比例才能获得正确的砖效果并填补所有空白cms的非技术用户更新或更改图像的巨大痛苦。插件也很难初始化。

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

请注意，这是在自定义cms中，所以我正在寻找不是的答案特定于cms平台，如WordPress。

Answer 1

Rafaela Ferro写了article on medium，其中详细介绍了使用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>

Answer 2

我认为这对您有用。

这是一个CSS解决方案，您可以在其中使用任何尺寸的图像，并且其布局为3 column。

body{
  height:500px;
}

ul {
    list-style: none;
    -moz-column-count: 3; /*change this to change the grid column count*/
    -webkit-column-count: 3; /*change this to change the grid column count*/
    column-count: 3; /*change this to change the grid column count*/
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    padding: 0px 4px 4px 4px;
    margin-top: -10px;
    display: inline-block;
    width: 100%;
    overflow:visible;
    
}

li {
    width: 100%;
    display: inline-block;
    float:left;
    background: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 1%;
}

li div {
    border-radius: 3px;
    background-color: #f4faff;
    margin-top: 1em;
    cursor: pointer;
}

li div img{
    height: auto;
    width: 100%;
    vertical-align: middle;
    border: 1px solid #ddd;
}

<ul>
    <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
    <li><div><img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt=""></div></li>
    <li><div><img src="https://images7.alphacoders.com/346/346251.jpg" alt=""></div></li>
    <li><div><img src="https://wallpaperbrowse.com/media/images/img_fjords.jpg" alt=""></div></li>
    <li><div><img src="https://www.iloveshayari.in/wp-content/uploads/2018/01/good-morning-lovely-images-1024x932.jpg" alt=""></div></li>
    <li><div><img src="http://www.whoa.in/20130627-Whoa/pink-natural-wallpaper.jpg" alt=""></div></li>
    <li><div><img src="https://www.usnews.com/dims4/USNEWS/ff9c2b0/2147483647/thumbnail/1280x480%5E/quality/85/?url=http%3A%2F%2Fmedia.beam.usnews.com%2Fdf%2F15%2F24d3553c442296f8206e9698bf6c%2Fresizes%2F1500%2Fbs18.sub.nat.environment.jpg" alt=""></div></li>
</ul>

但是此解决方案中有一个错误-我有reported 最近。 但是，如果不将其与box-shadow配合使用，您将不会遇到此错误。

希望对您有帮助。

Answer 3

您是否考虑过改用CSS Columns？我已经使用了类似于下面的内容，没有任何问题。它还允许在@media断点之间提供极大的灵活性。

编辑：它目前还比CSS Grid better support（截至2018年6月）。

.columns__container {
  column-count: 3;
  column-gap: 15px;
  counter-reset: item-counter;
}

/* OR, with arbitrary media queries */

.columns__container {
  column-count: 2;
  column-gap: 15px;
  counter-reset: item-counter;
}
@media screen and (min-width: 576px) {
  .columns__container {
    column-count: 3;
  }
}
@media screen and (min-width: 768px) {
  .columns__container {
    column-count: 4;
  }
}
@media screen and (min-width: 992px) {
  .columns__container {
    column-count: 5;
  }
}
@media screen and (min-width: 1200px) {
  .columns__container {
    column-count: 6;
  }
}

<div class="columns__container">
  <figure>
    <img src="..." alt="..." />
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="..." alt="..." />
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="..." alt="..." />
    <figcaption>...</figcaption>
  </figure>
</div>

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

3 个答案: