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; }
おまけ
.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; }