Элементы управления сверху изображения

Question

Я искал, но не могу найти хороший ответ.

• Мне нужно разместить элементы управления, а именно текстовое поле и две кнопки, поверх изображения.
• Изображение настроено на 100% ширины страницы, причем высота автоматически настраивается браузером.
• Элементы управления должны согласовываться с точными позициями изображения и быть соответствующим по размеру.

Вы можете увидеть изображение, которое я говорю о here. Я думаю, что размещение самоочевидно.

Я могу жить без контроля размеров, если это необходимо, но на самом деле нужно позиционирование.

Благодаря

Answer 1

Вы можете использовать комбинацию position:fixed или position:absolute с @media queries для ввода и ширины кнопки. Таким образом, пока изображение изменяется, ваши элементы управления сохраняют ту же позицию. Например, position:absolute; left:10%; top:20%;.

Сказав это, нет смысла иметь гигантское изображение, когда вы могли бы сэкономить время загрузки и иметь что-то, что на самом деле можно использовать, создав responsive design. Как и сейчас, это изображение невозможно прочитать в телефоне, плюс ваши входы станут крошечными!

@media queries позволит вам иметь разные стили для разных разрешений экрана (и плотности пикселей). В вашем случае у вас может быть ваш текущий макет для рабочего стола и начать перемещение элементов один под другим для iPad и небольших мобильных телефонов. Таким образом, для смартфонов, например, вы можете иметь элементы в этой схеме (320px ширина):

• логотип меню
• видео/фото
кнопки
• Войти/регистрация
• сноска 1
• сноска 2
• сноска 3