DIV «содержит» как изображение, чтобы сохранить масштабированные пропорции. ⇐ CSS

[Anonymous]

У меня есть изображение, которое имеет свойство CSS object-fit:tain, которое правильно масштабирует пропорции изображения при изменении размеров холста. Я пытаюсь построить поверх нее сетку, в которой человек может выбирать различные области изображения, например:
[img]https:/ /i.sstatic.net/wrXgOHY8.png[/img]

Я использовал все, от статических DIV до гибких блоков, и теперь я остановился на CSS Grid. При одинаковом соотношении сторон это работает правильно, однако, как только я масштабирую что-то неоднородное, изображение корректно обновляется, однако поля также не масштабируются, как показано ниже:
< img alt="scaled iamge" src="https://i.sstatic.net/ktMr5Mb8.png" />
Я могу установить изображение так, чтобы оно не подходило, что затем «исправляет» проблема, но тогда у меня остался персонаж с очень плохими пропорциями.




Это личный проект, поэтому я рад показать любой исходный код, если это необходимо. Пока у меня есть это:

Код: Выделить всё

Код: Выделить всё

.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));
}
}

Изменить; если кто-то хочет попробовать, вот персонаж:



Подробнее здесь: https://stackoverflow.com/questions/784 ... roportions