image-grid.css

/*Image Flags Snippet by Lithou
http://github.com/lithou/sandbox
*/

/* 上面的地址是 图片并列显示的原始地址，我去除了非必须的部分，
且解决了在使用 img-gird 语法与 minimal 主题图片放大缩小代码的兼容问题。
 */


/* Grid View ---- old*/

/* .img-grid p {
    display: table;
}

.img-grid span.image-embed[alt*="."] {
    display: table-cell;
    vertical-align: middle;
}

.img-grid img[alt*="."]:hover{
    transform: scale(1.1);
}



.img-grid  a.external-link {
    display: table-cell;
    vertical-align: middle;
}

.img-grid  a.external-link > img {
    padding-right: 30px !important;
} */





/* Grid View ---- New */
.img-grid p {
    display: flex;
}

.view-content .markdown-preview-view p a img {
    padding-right: 30px;
    margin: 1.6em 10px 1.6em 0 !important;
}


.img-grid p img[alt*="mdimg-1"] {
    width: 100%;
    height: auto;
}

.img-grid p img[alt*="mdimg-2"] {
    width: calc((100% - 30px) * 0.5);
    height: auto;
}

.img-grid p img[alt*="mdimg-3"] {
    width: calc((100% - 60px) * 0.333333);
    height: auto;
}

.img-grid p img[alt*="mdimg-4"] {
    width: calc((100% - 90px) * 0.25);
    height: auto;
}

.img-grid p img[alt*="mdimg-5"] {
    width: calc((100% - 120px) * 0.2);
    height: auto;
}