Блог

Я хочу сделать виджет в стиле карусели, который состоит из 3 изображений и двух кнопок. Моя проблема в том, что все это должно быть отзывчивым и масштабироваться (до некоторого максимума) и уменьшаться, сохраняя при этом отношения между изображениями.

Форма выглядит следующим образом:

Размеры пикселей изображений известны заранее, и любое необходимое соотношение может быть известно заранее (например, количество, необходимое для перемещения зеленого и синего прямоугольников, поскольку они не центрированы по вертикали).

Я не очень разбираюсь в HTML/CSS, и мне удалось получить эту форму с помощью flexboxes и переводов, но мне никогда не удавалось правильно масштабировать ее вместе с остальной частью страницы.

Я не совсем понимаю, возможно ли это вообще с помощью CSS, поскольку для этого требуется какое-то абсолютное позиционирование / переводы / и т. Д., Которые разрушают его модель коробки.

Следующее, что я подумал о том, чтобы попробовать вместо этого использовать холст и рисовать изображения самостоятельно, позволяя ширине холста растягиваться по желанию (до максимума), пока я контролирую высоту в JS, так как я знаю соотношение сторон виджета. Хотя я бы действительно предпочел более простое решение HTML/CSS.

Я полагаю, что мог бы сделать то же самое без холста — контейнера, который управляется CSS по ширине, но я контролирую его высоту, и все изображения/кнопки могут быть абсолютно расположены в нем, но это тоже немного странно.

Ваша цель может быть достигнута с помощью значений ширины в процентах (высота устанавливается автоматически или не устанавливается) для изображений в разных точках останова CSS (например, начальная загрузка указана по адресу https://getbootstrap.com/docs/5.0/layout/breakpoints/). Практически с эстетической точки зрения я предлагаю установить кнопки на значения пикселей (опять же, отличающиеся в точках останова). Либо контейнер (например, элемент div), либо элемент тела будет родительским элементом, к которому будут масштабироваться ваши изображения и кнопки.

Чтобы выполнить наложение изображений (и горизонтальное выравнивание кнопок, упомянутых в следующем абзаце), для всех элементов вам нужно будет установить z-индекс, который действительно требует либо абсолютного, либо фиксированного позиционирования. Учитывая, что ваши элементы будут либо абсолютными, либо фиксированными в положении, вы можете изменить вертикальное позиционирование с помощью свойства top.

Дайте трем изображениям автоматическое левое/правое поле. Установите для кнопок тот же z-индекс, что и для зеленого изображения, чтобы они прилегали к зеленому изображению. Дайте кнопке L левое поле авто и правое поле 0. Дайте кнопке R левое поле 0 и правое поле авто.

В этом решении не требуется JS, как вы бы предпочли.