###現在の問題点
Instagramに投稿した写真は、大きさがバラバラなため、バランスが良くない表示になる。
画像の横幅は決まっていて、比を維持しながらそれに合わせて写真の高さが変わるので、行ごとにばらばらな表示になってしまう。
vertical-align: middle;
で縦の真ん中にはしてみた。
###やってみたこと
- 子要素をdisplay:flex;にする。
- object-fit: contain; とか object-fit: scale-down;
とかやってみましたが、理想通り思ったように表示されず、、、
検索して調べたページについては忘れてしまいました。
親が、inline-flexなのが問題?
実現したいこと
####Flexboxで画像を表示するときに綺麗に並べたい。
#####理想
- 正方形で写真を並べる、横3つ。
- 左上から始まり横に進み、1行終わると左に行く、右下で終了。
- 正方形の写真はそのまま。横長、縦長は、余白を作って全体を比を変えずに正方形の中に表示させる。
こういったものにしたいです。
該当のソースコード
Wordpressの固定ページに埋め込みます。
該当部分のコード
html
1<div class="instagram_bg">[instagram]</div>
CSS
1/*instagram oya*/ 2.instagram div { 3display:inline-flex; 4 5align-content:center; 6 width :33.3%; 7} 8 9/*instagram ko*/ 10.instagram div img { 11 width: auto; 12 max-width: 100%; 13 height: auto; 14 vertical-align: middle; 15} 16 17/*instagram bg*/ 18div .instagram_bg{ 19background:#EEF8FA; 20padding:3%; 21margin:0em 0em 1em 22} 23
php
1function instagram_embed(){ 2 ob_start(); 3$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token=token_hogehoge&count=18'); 4 5 6 if ($json) { 7 $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); 8 $arr = json_decode($json, true); 9 $arr = $arr['data']; 10 if (count($arr)) { 11 //dataの数があるだけループ 12 echo "<div class='instagram'>\n"; 13 foreach($arr as $v) { 14 $Link = $v['link']; 15 $imgSrc = $v['images']['standard_resolution']['url']; 16 echo "<div class='instagram_post'><a href='{$Link}' target='_blank' ><img src='{$imgSrc}' /></a></div>"; 17 }; 18 echo "</div>\n"; 19 20 21 } 22 23 } 24 return ob_get_clean(); 25} 26 27 28add_shortcode('instagram', 'instagram_embed');
###参考ページ
Instagram APIを使って画像を出力
これのli lu を div に変える。Flexbox
これで挟む
最後にadd_shortcodeして、ショートコード[instagram]にしました。
回答3件
あなたの回答
tips
プレビュー