Flexboxでの画像の表示について。

Question

###現在の問題点

Instagramに投稿した写真は、大きさがバラバラなため、バランスが良くない表示になる。
画像の横幅は決まっていて、比を維持しながらそれに合わせて写真の高さが変わるので、行ごとにばらばらな表示になってしまう。

vertical-align: middle;
で縦の真ん中にはしてみた。

###やってみたこと

• 子要素をdisplay:flex;にする。
• object-fit: contain;　とか　object-fit: scale-down;

とかやってみましたが、理想通り思ったように表示されず、、、
検索して調べたページについては忘れてしまいました。

親が、inline-flexなのが問題？

実現したいこと

####Flexboxで画像を表示するときに綺麗に並べたい。

#####理想

＊青で塗りつぶしているのは、写真が入った時の例です。

• 正方形で写真を並べる、横3つ。
• 左上から始まり横に進み、1行終わると左に行く、右下で終了。
• 正方形の写真はそのまま。横長、縦長は、余白を作って全体を比を変えずに正方形の中に表示させる。

こういったものにしたいです。

該当のソースコード

Wordpressの固定ページに埋め込みます。

該当部分のコード

<div class="instagram_bg">[instagram]</div>

/*instagram oya*/
.instagram div { 
display:inline-flex;

align-content:center;
  width :33.3%;
}

/*instagram ko*/
.instagram div img {
  width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*instagram bg*/
div .instagram_bg{
background:#EEF8FA;
padding:3%;
margin:0em 0em 1em
}

function instagram_embed(){
    ob_start();
$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token=token_hogehoge&count=18');


  if ($json) {
    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $arr = json_decode($json, true);
    $arr = $arr['data'];
     if (count($arr)) {
      //dataの数があるだけループ
      echo "<div class='instagram'>\n";
      foreach($arr as $v) {
        $Link = $v['link'];
        $imgSrc = $v['images']['standard_resolution']['url'];
        echo "<div class='instagram_post'><a href='{$Link}' target='_blank' ><img src='{$imgSrc}' /></a></div>";
      };
      echo "</div>\n";
        
         
    }

  }
     return ob_get_clean();
}


add_shortcode('instagram', 'instagram_embed');

###参考ページ

Instagram APIを使って画像を出力
これのli lu を　div　に変える。Flexbox

これで挟む

最後にadd_shortcodeして、ショートコード[instagram]にしました。

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[_magurochan]

問題点について、詳細を少し追加しました。
説明するのが難しいので、実際のページへのリンクを貼るのは自分が良ければ問題ないのですかね？
問題なければリンク貼ります。

エラーは出ていないです。思った通りに表示されないだけです。

Answer 1

.instagram {
	display: flex;
	flex-wrap: wrap;
}
.instagram > div {
	width: 33.33%;
	/* 正方形の領域を作っている */
	padding-top: 33.33%;
	position: relative;
}
.instagram a { /* 正方形の領域を作っている */
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.instagram img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
```**動くサンプル：**[https://jsfiddle.net/eafgnyjm/](https://jsfiddle.net/eafgnyjm/)

Comments

[_magurochan]

ありがとうございます。だいぶ思ったものに近づいてきました。

写真が小さかったため、object-fit: contain;はcoverに変えました。
また、はみだしがあったので padding:1em;をimgに対して書いて、内側に寄せました。

一番下の列にリンクの下線が出ていて、text-decoration:none;などいろいろ試しましたが消えませんでした。これはChromeのバグと聞いたことがあります。どうやって解決したら良いでしょうか。

以下、CSS

.instagram {
display: flex;
flex-wrap: wrap;
}
.instagram > div {
width:33.33%;
height:auto;

/* 正方形の領域を作っている */
padding-top: 33.33%;
position: relative;
}

div.instagram a{ /* 正方形の領域を作っている */
position: absolute;

top: 0;
bottom: 0;
right: 0;
left: 0;
}

div.instagram img{
width: 100%;
height: 100%;
padding:1em;
object-fit: cover;
}

[kei344]

> 一番下の列にリンクの下線が出ていて
https://jsfiddle.net/eafgnyjm/1/
提示したものでも出ていますか？
出ていないなら出力されたHTMLの構造がおかしくなっていないか確認してみてください。

[_magurochan]

はじめに一回そのままでCSSコピペして、試した時にも下線でていましたね。

[kei344]

提示したURLで、出たかということを確認しています。そうでなければ他の要素やスタイルの影響の可能性が高いので。

[_magurochan]

提示していただいたページのものでは出ないですね。

https://web-directions.com/director/diary/googlechrome_textdecaration_underline.html
このページのような症状だと思います。

また、上記ページのpadding-bottom:1px;を試した時だけ治りはしたのですが、できれば、見た目の変わらないもにしたいのです

[kei344]

問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記してください。

[_magurochan]

https://magurochanwav.com/
このページです。

いま、UAでChromeの時だけ、padding:1px;するようにしています。

[kei344]

確かにおきますね。
div.instagram_post>a>imgをdiv.instagram_post>div>a>imgに変えてみてください。（CSSもそれにあわせてください。position: absolute;がdivにくるようにしてみてください）

Answer 2

改めてググってみると、　Chromeのバグっぽかったです。

UAでChromeの時だけ、padding:1px;するようにしました。

Answer 3

改めてググってみたら、多分、Google Chromeのバグという説が有力です。