Мне нужно расположить изображение внизу фонового изображения и оставить их на месте при изменении размера окна

ProgramBox

Мне нужно расположить изображение внизу фонового изображения и оставить их на месте при изменении размера окна

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#javascript #css #reactjs

Вопрос:

У меня есть фоновое изображение, и у меня есть другие изображения, которые должны оставаться внизу фонового изображения, даже если размер окна изменяется или размер экрана отличается.

Это веб-приложение ReactJS, поэтому любой javascript или CSS будет работать.

CSS:

 html {
   background: url(imageInMemory.png) no-repeat center center fixed;
   background-size: contain;
}

Javascript:

 // I calculate the ratio for 'background-size: contain'
let A = window.innerWidth;
let B = window.innerHeight;
let W = naturalWidth; // Width of image, I have this hardcoded
let H = naturalHeight; // Height of image, I have this hardcoded
const ratio = Math.min((A/W), (B/H));// this is the ratio to which the image was scaled given the current window size.
// I position images on top of background images where they should be using this new ratio
<div style={{marginTop: ratio * H * .7}}>
    <img src='otherImage'/>
</div>

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

Ответ №1:

Я сделал адаптивный макет для одного изображения позади и плавающей формы, изменив размер и расположение всех полей и текстов. Я не буду помещать сюда весь свой код, тогда я сказал вам создать свой собственный код внутри функции с именем «update_field_positions», запущенной в окне событий изменения размера и загрузки.

Для экранов с разрешением более 608 пикселей высота моего изображения составляет 882 пикселя

Затем я определяю причину пропорции: img_cadastro.clientHeight / 882

И используйте это значение для изменения размера и перемещения всех элементов

Я тоже использовал css:

 @media screen and (max-width:608px) {
        .img_cadastro {
            width:100%;
            height:auto;
        }

 @media screen and (min-width:608px) {
    .img_cadastro {
        width:608px;
        height:882px;
    }

Небольшой фрагмент моего рабочего js-кода:

 function update_field_positions() {
    .... (some code) ....
    var razao = img_cadastro.clientHeight / 882;
    bloco_campos_ext.style.top = ((258 * razao)   compensador)   "px";
    div_voucher.style.marginTop = ((57 * razao)   compensador_voucher)   "px";
    div_voucher.style.marginLeft = ((120 * razao)   compensador)   "px";
    nome_voucher.style.fontSize = (24 * razao)   "px";
    cod_voucher.style.fontSize = (28 * razao)   "px";
    resize_object(bloco_campos_ext, 357, 148, razao, false);
    resize_object(bloco_campos_int, 357, 148, razao, false);
}

Ответ №2:

Используйте это css для своего div :

     position:fixed;
    bottom:0;

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

Ответ №3:

Для адаптивного экрана, работающего при изменении размера окон

Ваши коды получения соотношения и изменения положения должны быть внутри функции, вы могли бы создать функцию с именем update_field_positions, например: update_field_positions()

затем ваша функция должна быть вызвана в 2 событиях: onload и window.resize

пример:

 function start() {
    update_field_positions();
    window.onresize = update_field_positions;
}
<body onLoad="start()">

Вам следует использовать onload, чтобы объекты ожидания были готовы перед работой с ними, чтобы избежать ошибок, и window.onresize для обновления значений с помощью нового window.innerWidth

Другая проблема заключается в том, что размер окна может быть изменен до меньшего размера, чем ваше изображение

И затем вам нужно создать некоторый код для обработки этих ситуаций:

 if (window.innerWidth < naturalWidth) {...}