У меня есть абсолютные блоки div, размещенные в определенных точках изображения.
Поскольку я хочу, чтобы мое изображение было отзывчивым, я бы тоже хотел, чтобы абсолютные блоки были отзывчивыми. Вот где я застрял: я мог вручную изменить размер и перевести с помощью шкалы CSS и перевести пропорции, но это не отвечает:
*{margin: 0;padding: 0}
.relat{position: relative;}
.abs {position:absolute;}
.cube1 {background-color: red;border: 1px solid black}
.cube2 {background-color: blue;border: 1px solid black;}
.cube3 {background-color: purple;border: 1px solid black;}
.cube1O {background-color:red;}
.cube2O {background-color: blue;}
.cube3O {background-color: purple;}
.transform{transform-origin: top left;}
.modify{transform: scale(0.5);}
.modify2{transform: scale(0.5) translate(-100%, 0);}
.modify3{transform: scale(0.5) translate(0, -100%);}
<div class="relat">
<div class="abs cube1O" style="top:0px;left:0px;width:200px;height:200px"></div>
<div class="abs cube2O" style="top:0px;left:200px;width:200px;height:200px"></div>
<div class="abs cube3O" style="top:200px;left:400px;width:200px;height:200px"></div>
<div class="abs cube1 transform modify" style="top:0px;left:0px;width:200px;height:200px"></div>
<div class="abs cube2 transform modify2" style="top:0px;left:200px;width:200px;height:200px"></div>
<div class="abs cube3 transform modify3" style="top:200px;left:200px;width:200px;height:200px"></div>
</div>
3 больших кубика представляют позицию на изображении размером 100%, 3 меньших (здесь 50%) представляют позицию на изображении размером 50%. (но так как он отзывчив, преобразование может быть любым процентом).
Я не вижу по виду преобразования для этих 3-х блоков (но на самом деле их гораздо больше), существует ли уникальное преобразование CSS, которое будет применено к кубам.
Я использую
transform-origin: top left;
чтобы точка поворота находилась в верхнем левом углу.
Имеет ли это значение или нет?
Проблема с
transform: scale(scaleXY) translate(transX, transY);
я не могу думать об уникальном наборе трансфомации для каждого блока.
Я бы предпочел не включать javascript.
Есть ли способ «просто» выполнить эту задачу?
Спасибо.
РЕДАКТИРОВАТЬ: также я помещаю значения top, left, width и height во встроенном стиле, потому что в моем коде я получаю их из базы данных: я не могу поместить их в файл css.
РЕДАКТИРОВАТЬ 2:
Просматривая некоторые посты, относящиеся к этой проблеме, я видел, что, возможно, я мог бы решить мою проблему, используя процентное отношение для свойств top, left, width, height вместо фиксированных значений пикселей. Я посмотрю на это.
Если НЕТ чистого решения CSS возможно, я также был бы заинтересован в решении javascript.