Блог

Главная - Вопросы по программированию - Адаптивное преобразование элементов с абсолютным расположением в css

Адаптивное преобразование элементов с абсолютным расположением в css

#html #css #responsive

#HTML #css #адаптивное

Вопрос:

У меня есть абсолютные блоки div, размещенные в определенных местах изображения. Поскольку я хочу, чтобы мое изображение было адаптивным, я хотел бы, чтобы абсолютные блоки тоже были адаптивными. Вот где я застрял: я мог бы вручную изменять размер и переводить с помощью css scale и переводить пропорции, но это не реагирует : 

 *{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.

Комментарии:

1. В чем проблема с использованием значений, основанных на процентах? Вы также можете использовать медиазапросы CSS для применения разных правил css к элементам для разных типов экранов

2. Я не уверен, что вы имеете в виду. В этом «простом» примере у меня есть 3 div, которые я хочу масштабировать, сохраняя их относительное положение. Проблема в том, что я не могу применить одно и то же преобразование к каждому из них. Поскольку я хочу, чтобы оно было адаптивным, я хотел бы знать, существует ли уникальная формула (своего рода матрица преобразования), которая позволяет мне изменять размер без потери отношения (блок B справа от блока A, блок C справа внизу от B). Код, который я привел в качестве примера, — это просто «снимок». Я хотел бы сохранить ту же позицию, если масштаб составлял, скажем, 30%. Здесь вопрос не в размере экрана.

3. Извините, но я не могу знать вашу точную проблему. Проблема, которую вы представляете, может быть связана с вашим подходом к исходной проблеме. Если вы можете предоставить более подробную информацию об этом, возможно, мы сможем вам помочь. Что касается адаптивных медиазапросов css, посмотрите здесь w3schools.com/css/css_rwd_mediaqueries.asp

4. CSS может быть динамически добавлены в классы CSS также.г <style> .className { height: <?php echo $height ?> } </style>

5. @Meta Pakistani: извините, если изложение моей проблемы недостаточно ясно. Я думал, что название моего вопроса само по себе говорит само за себя. я попробую еще раз: могу ли я иметь общий scale(xy) translate(x, y) для каждого блока, который я мог бы поместить с абсолютной позицией, что позволило бы адаптивно изменять размер контейнера? что-то вроде css-tricks.com /…

Ответ №1:

Попробуйте добавить overflow:hidden; в класс overlay, это то, что вы хотите?