Make image aspect ratio to be 1:1 in a grid shaped layout

For example, there are cards aligned in a grid shaped layout with 33.33% column width, then to make the images in those cards to be of square dimensions, we could do something like this -

<div class="card">
    <div class="image-wrapper">
        <img src="...">
    <div class="content">

.image-wrapper {
    width: 100%;
    position: relative;
    padding-top: 100%;
    margin-bottom: 10px;

    img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        object-fit: cover;
        height: auto; // or height: 100%, depending upon what works
        margin-bottom: 0;

Reference -