画像のグリッドレイアウト

VanGogh_1887_Selbstbildnis

face1

vegetable

sea

test-img-2

test-img-1

object-fit プロパティを使った簡単なグリッドレイアウト

ブラウザのチェックを行っていただく必要がありますが、このようなグリッドレイアウトを、ギャラリープラグイン等を追加しなくても 少しのCSSで実現できるスタイルについてメモを残します。

下のhtmlソースを見ていただくとわかるように、単にWordPressの投稿画面から、画像を数枚追加しただけです。

Note:Can I Useでは、IEは、未サポートになっているみたいですが、若干画像がゆがみますが、動作するようでした。
Safari5.1.7 動作しません。

投稿本文

<a href="#"><img src="Your Image URI" alt="VanGogh_1887_Selbstbildnis" width="595" height="751" class="alignnone size-large wp-image-2342" /></a>

<a href="#"><img src="Your Image URI" alt="face1" width="600" height="600" class="alignnone size-full wp-image-2318" /></a>

<a href="#"><img src="Your Image URI" alt="vegetable" width="595" height="324" class="alignnone size-large wp-image-2045" /></a>

<a href="#"><img src="Your Image URI" alt="sea" width="595" height="287" class="alignnone size-large wp-image-2063" /></a>

<a href="#"><img src="Your Image URI" alt="test-img-2" width="600" height="200" class="alignnone size-full wp-image-1638" /></a>

<a href="#"><img src="Your Image URI" alt="test-img-1" width="600" height="200" class="alignnone size-full wp-image-1637" /></a>

CSS

.entry-content img{
 object-fit: cover;
 width:15vw;
 height:15vw;
}
.entry-content a:first-of-type img{
 object-fit: cover;
 width:30vw;
 height:30vw;
 vertical-align:top;
}
.entry-content a{
 float:left;
}

おまけ

Please hover me
.entry-content .ltr {
 -webkit-animation-play-state: paused;
 /* Chrome, Safari, Opera */ animation-play-state: paused;
 border: 10px solid black;
 width: 340px;
 height: 480px;
 background: yellow;
 object-fit: cover;
 object-position: 0% 0%;
}
.entry-content figure {
 position: relative;
 display: inline-block;
 margin: 0;
}
.entry-content figcaption {
 position: absolute;
 top: 20px;
 left: 20px;
 background: black;
 color: white;
 padding: 8px 15px;
}
.entry-content .ltr:hover {
 width: 340px;
 height: 480px;
 border: 10px solid black;
 background: yellow;
 object-fit: cover;
 animation: ltr 12s infinite alternate;
}
@keyframes ltr {
 from {
 object-position: 0% 0%;
}
to {
 object-position: 100% 100%;
}
}

2018/2/11
p要素の影響で、少しずれが生じていたのでCSS追加

:not(.intro) p{
 margin-bottom:0;
}

新着記事

コメントは受け付けていません。