前提・実現したいこと
デモ
グリッドレイアウトで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}
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/03 23:38