instagram風レスポンシブな正方形の画像を作りたい

レスポンシブな正方形の画像を作りたいのですが、下記コードだと画像が表示されなくなってしまいます。

画像を囲っているdivが何px等具体的なサイズだと画像が表示されるのですが、calc(100% / 3)を使うと画像が表示されなくなってしまいます。

お力添え頂きたく思います。

https://codepen.io/negishiojotan/pen/dydLEdG

html
1<div class="container">
2  <div>
3    <img src="https://drive.google.com/uc?export=view&id=1Dcd2TLXfj3qp5nCI5d5ktphf1wTzTaNZ">
4  </div>
5
6  <div>
7    <img src="https://drive.google.com/uc?export=view&id=1Dcd2TLXfj3qp5nCI5d5ktphf1wTzTaNZ">
8  </div>
9
10  <div>
11    <img src="https://drive.google.com/uc?export=view&id=1Dcd2TLXfj3qp5nCI5d5ktphf1wTzTaNZ">
12  </div>
13</div>

css
1div.container {
2  width: 80%;
3  display: flex;
4  justify-content: flex-start;
5}
6
7div.container div {
8  width: calc(100% / 3);
9  height: 0;
10  padding-bottom: calc(100% / 3);
11}
12
13div.container div img {
14  width: 100%;
15  height: 100%;
16  object-fit: cover;
17}

行動規範の内容に同意します

回答2件

ベストアンサー

親要素がheight: 0;なのでimgもheight: 0;になるので表示されないのですが、これを0以外にすると正方形にはならなくなります。

position: absolute;で絶対配置にするといいでしょう。

css
1div.container div {
2  width: calc(100% / 3);
3  height: 0;
4  padding-bottom: calc(100% / 3);
5  position: relative;  /* 追加 */
6}
7
8div.container div img {
9  width: 100%;
10  height: 100%;
11  object-fit: cover;
12  position: absolute;  /* 追加 */
13}

おまけ

CSS の aspect-ratio を使うと簡単に正方形にできます。

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

IEは非対応ですが、すでにサポート終了してますので無視していいでしょう。

css
1div.container div {
2  width: calc(100% / 3);
3  aspect-ratio: 1 / 1;
4}
5
6div.container div img {
7  width: 100%;
8  height: 100%;
9  object-fit: cover;
10}