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

Question

我在 CMS 中使用 masonry/packery js 插件制作了一个砖石网格，用户管理图像非常麻烦，因为它们需要精确的比例才能获得适当的砖块效果并填充所有差距对于 cms 的非技术用户更新或更改图像来说是一个很大的痛苦。插件初始化也很慢。

现在是否有任何现代 html 解决方案或更新的 js 插件与更新的技术，如 flexbox 或 css 网格，可以给我相同的砌体效果，而无需预先定义比率每张图片并制作它，以便 cms 的用户可以上传任何尺寸的图片，并且它会适合 packery 布局，而无需定义它应该在布局中的位置或在上传时调整图片大小？

Note this is in custom cms so I am looking for answers that are not specific to the cms platform like WordPress.

Answer 1

我认为这很适合你。

这是一个 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>

But there is a bug in this solution - which I have reported recently. But you will not face this bug if don't use box-shadow with it.

希望对你有所帮助。

Answer 2

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 3

你要找的一定是object-fit。只需使用 css 设置您想要的高度和宽度，然后将 object-fit: cover 应用于 img 标签。您的图片将作为 background-size: cover.

Answer 4

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

编辑：它目前还有 better support 比 CSS 网格（截至 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 中管理砌体网格图像的最佳方式？

Best way to manage images for a masonry grid in a CMS?

css

content-management-system

flexbox

masonry

css-grid