I have an image which has a css property of object-fit: contain which scales the proportions of the image correctly as I change the canvas dimensions. I am trying to build a grid on top of it where a person can select different areas of the image, like so:

I have used everything from static DIV’s to flex boxes and now Im settling down into a CSS Grid. With a uniform aspect ratio this works correctly, however as soon as I scale to something non-uniform the image correctly updates however the boxes don’t scale as well, as seen below:

I can set the image to not fit which then ‘fixes’ the issue, but then Im left with a very badly proportioned character.

This is a personal project so Im happy to show any source code as needed. So far I have this:

            <div class="selectGrid">

                <div class="item head justify-center">
                    <div></div>
                </div>

                <div class="item chest justify-center">
                    <div></div>
                </div>

                <div class="item bottom justify-center">
                    <div></div>
                </div>

            </div>

<style scoped>
.selectGrid {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr minmax(30px, 150px) 1fr 1fr;
    grid-template-rows: 15% 4% 20% 5% 42%;
    grid-template-areas:
        ". . head . ."
        ". . . . ."
        ". chest chest chest ."
        ". . . . ."
        "bottom bottom bottom bottom bottom"
        ". . . . .";
}

.item {
    display: flex;
}

.item>div {
    width: 100%;
    height: 100%;
    border: 1px solid white;
}

.head {
    grid-area: head;
}

.chest {
    grid-area: chest;
}

.bottom {
    grid-area: bottom;
}

.r-hand {
    grid-area: rhand;
}

@media (max-width:600px) {
    .item.head>div {
        max-width: 50px;
    }

    .item.chest>div {
        width: 70%;
        max-width: 165px;
    }
}

@media (min-width: 600px) and (max-width:960px) {
    .item.head>div {
        max-width: 100px;
    }

    .item.chest>div {
        width: 70%;
        max-width: 250px;
    }
}


@media (min-width:960px) {
    .item.head>div {
        max-width: 200px;
    }

    .item.chest>div {
        width: 70%;
        max-width: 300px;
    }

    .bottom>div {
        width: 100%;
        max-width: calc(400px -(100vh / 10));
    }
}
</style>