実現したいこと
aspect-ratioだけ効かないのを直したい。
発生している問題・分からないこと
画像を横に2枚並べた状態で画像比率を1:1にしたいのですがaspect-ratioだけ反映してくれません。親要素にaspect-ratioを入れたりしましたが変わりませんでした。ご教授頂けますと幸いです。
該当のソースコード
HTML
1 <main class="wrapper grid"> 2 <div class="item"> 3 <img src="images/WCBCafe/images/menu1.webp"> 4 <p>アボカドトースト</p> 5 </div> 6 <div class="item"> 7 <img src="images/WCBCafe/images/menu2.webp"> 8 <p>生ハムのカプレーゼ</p> 9 </div> 10 <div class="item"> 11 <img src="images/WCBCafe/images/menu3.webp"> 12 <p>ペンネボロネーゼ</p> 13 </div> 14 <div class="item"> 15 <img src="images/WCBCafe/images/menu4.webp"> 16 <p>ルーム貝のワイン蒸し</p> 17 </div> 18 <div class="item"> 19 <img src="images/WCBCafe/images/menu5.webp"> 20 <p>菜葉のグリル</p> 21 </div> 22 <div class="item"> 23 <img src="images/WCBCafe/images/menu6.webp"> 24 <p>ジェノベーゼ</p> 25 </div> 26 <div class="item"> 27 <img src="images/WCBCafe/images/menu7.webp"> 28 <p>ラザニア</p> 29 </div> 30 <div class="item"> 31 <img src="images/WCBCafe/images/menu8.webp"> 32 <p>カプチーノ</p> 33 </div> 34 <div class="item"> 35 <img src="images/WCBCafe/images/menu9.webp"> 36 <p>チョコブラウニー</p> 37 </div> 38 </main>
CSS
1.grid{ 2 display: grid; 3 gap: 2rem 1.5rem; 4 grid-template-columns: repeat(2, 1fr); 5 text-align: center; 6} 7.item img{ 8 object-fit: cover; 9 border-radius: 16px; 10 aspect-ratio: 1/1; 11} 12.item p{ 13 font-size: .875rem; 14}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
親要素にaspect-ratioを入れたりしましたが変わりませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/07/08 08:13
2024/07/08 08:34
2024/07/09 01:54