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

Posted 2023-03-06

【中文标题】在 CMS 中管理砌体网格图像的最佳方法是啥？

【英文标题】：Best way to manage images for a masonry grid in a CMS?在 CMS 中管理砌体网格图像的最佳方法是什么？

【发布时间】：2018-11-23 05:56:09

【问题描述】：

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

现在有没有任何现代的 html 解决方案或更新的 js 插件，可能有像 flexbox 或 css 网格这样的新技术，可以给我同样的砌体效果，而不必预先定义每个图像的比例，并使其用户cms 可以上传任何尺寸的图片，它会适合打包布局，而无需定义它应该在布局中的位置或在上传时调整图片大小？

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

【参考方案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" ></div></li>
    <li><div><img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" ></div></li>
    <li><div><img src="https://images7.alphacoders.com/346/346251.jpg" ></div></li>
    <li><div><img src="https://wallpaperbrowse.com/media/images/img_fjords.jpg" ></div></li>
    <li><div><img src="https://www.iloveshayari.in/wp-content/uploads/2018/01/good-morning-lovely-images-1024x932.jpg" ></div></li>
    <li><div><img src="http://www.whoa.in/20130627-Whoa/pink-natural-wallpaper.jpg" ></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" ></div></li>
</ul>

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

希望对你有帮助。

【参考方案2】：

Rafaela Ferro 写了一封 article on medium，其中详细介绍了如何使用 CSS 网格创建砖石风格的图像布局，从而实现极大的灵活性。它的 CSS 不到 30 行，而且还具有响应性。

利用图像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>

【讨论】：

正是我想要的！我知道我阅读了一些文章，但在我保存的链接的海洋中找不到它们。我通过为过滤器添加一些 javascript 对其进行了一些修改，效果很好！

【参考方案3】：

您要查找的内容必须是object-fit。只需使用 css 设置所需的高度和宽度，然后将 object-fit: cover 应用于 img 标记。您的图片将充当background-size: cover。

【参考方案4】：

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

编辑：它目前还拥有better support 而不是 CSS Grid（截至 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="..."  />
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="..."  />
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="..."  />
    <figcaption>...</figcaption>
  </figure>
</div>