aspect-ratioだけ効かないのを直したい。

Question

実現したいこと

aspect-ratioだけ効かないのを直したい。

発生している問題・分からないこと

画像を横に2枚並べた状態で画像比率を1:1にしたいのですがaspect-ratioだけ反映してくれません。親要素にaspect-ratioを入れたりしましたが変わりませんでした。ご教授頂けますと幸いです。

該当のソースコード

    <main class="wrapper grid">
        <div class="item">
            <img src="images/WCBCafe/images/menu1.webp">
            <p>アボカドトースト</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu2.webp">
            <p>生ハムのカプレーゼ</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu3.webp">
            <p>ペンネボロネーゼ</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu4.webp">
            <p>ルーム貝のワイン蒸し</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu5.webp">
            <p>菜葉のグリル</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu6.webp">
            <p>ジェノベーゼ</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu7.webp">
            <p>ラザニア</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu8.webp">
            <p>カプチーノ</p>
        </div>
        <div class="item">
            <img src="images/WCBCafe/images/menu9.webp">
            <p>チョコブラウニー</p>
        </div>
    </main>

.grid{
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}
.item img{
    object-fit: cover;
    border-radius: 16px;
    aspect-ratio: 1/1;
}
.item p{
    font-size: .875rem;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

親要素にaspect-ratioを入れたりしましたが変わりませんでした。

補足

特になし

Answer 1

こうするとどうですか？

.item img {
    object-fit: cover;
    border-radius: 16px;
    aspect-ratio: 1/1;
    width: 100%; /* これ */
}

Comments

[Riz]

ご教授頂きありがとうございます。ご指摘頂いた箇所を追加した所、画像を1:1にすることが出来たのですがVScode上で[aspect-ration]だけ赤字ではなく黒字で表記されてしまいます。こちらは黒字表記でも問題はないでしょうか?

[Lhankor_Mhy]

Issue 出てますね。
https://github.com/microsoft/vscode-css/issues/26

[Riz]

なるほど!お教え頂きありがとうございます。