css gridで並べたアイテムを正方形にしたい

前提・実現したいこと

デモ
グリッドレイアウトで3列に並べています。
高さがバラバラなので、幅を基準に正方形にしたいです。
ただし、アイテム一つあたりの幅が可変なのとレスポンシブ対応にしたいため、高さに固定値を設定したくないです。

jsで幅を取得して、取得した値を高さに設定すれば実装できそうな気がしますが、できる限りCSSで完結したいです。

発生している問題・エラーメッセージ

高さがバラバラです。

該当のソースコード

html
1<ul>
2   <li>
3      <img src="https://images.unsplash.com/photo-1564419320603-628d868a193f?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=343&q=80" />
4    </li>
5    <li>
6      <img src="https://images.unsplash.com/photo-1468581264429-2548ef9eb732?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" />
7    </li>
8    <li>
9      <img src="https://images.unsplash.com/photo-1545229765-7ff613f80127?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
10    </li>
11    <li>
12      <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80" />
13    </li>
14    <li>
15      <img src="https://images.unsplash.com/photo-1542662565-7e4b66bae529?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80" />
16    </li>
17    <li>
18      <img src="https://images.unsplash.com/photo-1549880181-56a44cf4a9a5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" />
19    </li>
20</ul>

css
1* {
2  box-sizing: border-box;
3}
4
5html {
6  font-size: 4vw;
7}
8
9ul {
10  display: grid;
11  grid-template-columns: repeat(3, minmax(0, 1fr));
12}
13
14img {
15  display: block;
16  max-width: 100%;
17  height: auto;
18}

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

回答2件

ベストアンサー

CSSを次のように編集すると、解決すると思います。

css
1<style>
2* {
3  box-sizing: border-box;
4}
5
6html {
7  font-size: 4vw;
8}
9
10ul {
11  display: grid;
12  grid-template-columns: repeat(3, minmax(0, 1fr));
13}
14
15li {
16  height: 0;
17  padding-bottom: 100%;
18  position: relative;
19}
20
21img {
22  position: absolute;
23  width: 100%;
24  height: 100%;
25  object-fit: cover;
26}
27</style>

投稿2021/07/03 16:51

mottox2

総合スコア299

erajera

2021/07/03 23:38

浮かせる発想が無かったです。ありがとうございます。

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

これでご希望通りですか？

CSS
1ul{
2  display: grid;
3  grid-template-columns: repeat(3, minmax(0, 1fr));
4}
5li{
6  position: relative;
7}
8li:before{
9  content: "";
10  display: block;
11  padding-top: 100%;
12}
13img{
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  top: 0;
18  right: 0;
19  bottom: 0;
20  left: 0;
21  margin: auto;
22  object-fit: cover;
23}