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

Question

我在CMS中使用砌体/包装js插件有一个砖石网格，用户管理图像非常麻烦，因为它们需要精确的比例才能获得适当的砖效果并填补所有空白，这对于CMS的非技术用户来说是一个很大的痛苦更新或更改图像。 此外，该插件初始化速度很慢。

现在是否有任何现代的 html 解决方案或更新的 js 插件，它们使用更新的技术，例如可能是 flexbox 或 css 网格，它们可以给我相同的砖石效果，而无需预定义每个图像的比例，并使 cms 的用户只需上传任何尺寸的图像，它适合包装布局，而无需定义它应该在布局中的位置或调整大小上传时的图片？

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

Answer 1

Rafaela Ferro 写了一篇关于 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>

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

我希望这对你有所帮助。

Answer 3

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

Answer 4

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

编辑：它目前也比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="..." alt="..." />
<figcaption>...</figcaption>
</figure>
<figure>
<img src="..." alt="..." />
<figcaption>...</figcaption>
</figure>
<figure>
<img src="..." alt="..." />
<figcaption>...</figcaption>
</figure>
</div>