CSS Grid Not Maintaining Aspect Ratio for Nested Elements in Chrome 117
I'm experiencing an scenario with CSS Grid where nested elements are not maintaining their aspect ratio as expected. I'm using a grid layout to create a responsive card grid, but when I resize the window, certain cards are stretching out of proportion. I've set the width and height of the card elements using CSS, but the nested images are not behaving as intended. Here's an example of my CSS: ```css .card { display: grid; grid-template-rows: auto 1fr; width: 300px; height: 400px; overflow: hidden; } .card img { width: 100%; height: auto; } ``` And my HTML looks like this: ```html <div class="card"> <img src="image-url.jpg" alt="Card image"> <div class="card-content">Some content here</div> </div> ``` In Chrome 117, when I resize the browser, the images appear to stretch vertically, losing their aspect ratio. I've tried adding `object-fit: cover;` to the image without any improvement. Is there a best practice for ensuring that nested elements maintain their aspect ratio within a CSS Grid layout? I've also checked that my container sizes are not being affected by any parent styles. This scenario only occurs in Chrome; Firefox and Safari render it correctly. Any insights would be greatly appreciated!