как установить форму в нужном месте с фоновым изображением на экранах разных размеров

Question

У меня есть одно фоновое изображение с width: 100%; и height: auto;

Я хочу показать форму на определенной части изображения.Проблема заключается в том, что при изменении устройства местоположение определенной части формы также изменяется.

Ref Image:

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

@media only screen and (min-width: 769px) and (max-width: 1024px) {
        .bottom-right {
            position: absolute;
            top: 29%;
            left: 57.5%;
            color: white;
        }
}

в нижнем правом углу - это класс моей формы.

Но, поскольку он использует медиа-запрос, работает тольков соответствии с правилом.

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

Answer 1

Вы можете рассмотреть возможность использования системы координат, которая не зависит от каких-либо единиц - например, пикселей или сантиметров.Для этого вы получите пиксельные координаты в верхнем левом и нижнем правом углу окна, которые указывают желаемое положение формы, и разделите их на размеры изображения.Теперь у вас будут дробные координаты.0,0 - это верхний левый угол, а 1,1 - нижний правый.

Как только вы узнаете, насколько большое изображение отображается в пикселях, вы можете вычислить, насколько далеко сдвинется ваша форма.

Верхний левый (внутри границы) находится на 588,84, а нижний правый на 838,458.Поскольку изображение имеет размер 940x604, пересчитанные координаты:

Слева вверху: 588/940, 84/604 (0,6255,0,1391)

Справа бот: 838/940, 458/604 (0,8915), 0,7583).

Теперь тогда.Если мы хотим показать изображение в 50%, мы можем вычислить координаты нашего прямоугольника следующим образом.

(0,6255 * 940 * 0,5), (0,1391 * 604 * 0,5)

(0,8915 * 940 * 0,5), (0,7583 * 604 * 0,5)

иначе указано,

Верхний левый угол: 294,42 Бот-правый элемент: 419,229

ВЧтобы доказать нашу работу, мы можем изменить размер изображения до 50% в редакторе изображений и проверить координаты углов.Я так и сделал - координаты верны.;)