画像を並べて表示のバリエーション

画像を並べて表示とやってることは同じで、画像のサイズだけ違うバリエーション！

オリジナルはマトリクス記法だったから、こっちは短冊マトリクス記法って感じかなー。

記法は [|& [画像URL][画像URL][画像URL]] で、強調記法との合わせ技は使ってないです。

https://gyazo.com/5b016b77e239ffcbc2b283421c56504dhttps://gyazo.com/33c30d9cb76b2cef618d1242d4b894b7https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504dhttps://gyazo.com/33c30d9cb76b2cef618d1242d4b894b7https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3d

ポートフォリオとかギャラリーとかで使えるかも。

もっと細いサムネイルにすることもできるんだけど、スマホ等でタッチしにくかったので5列にしてみた

でも細いほうがかっこいい気がする

下のサンプルは7列 width: calc(100%/7) です

https://gyazo.com/7ea252f58de24be59465b19831b91072

code:style.css

/* 短冊記法 */

.line:not(.cursor-line) class="deco-| deco-&" { display: inline-flex; flex-wrap: wrap }

.line class="deco-| deco-&" > span { width: calc(100%/5); overflow: hidden }

.line class="deco-| deco-&" img.image { object-fit: cover !important; margin: .2em; height: 30vh }

初出 2018-08-04