Question

我有一个背景图像，并且我有其他图像需要保留在背景图像的底部，即使窗口调整大小或屏幕尺寸不同。

这是一个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>

这适用于某些窗口大小，但有时图像不会位于背景图像右侧区域的顶部。

Answer 1

将此# Default Gitlab Host gitlab.com HostName gitlab.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa # Work Gitlab Host work.gitlab.com HostName gitlab.com PreferredAuthentications publickey IdentityFile ~/.ssh/work_rsa用于您的css：

div

Answer 2

在调整窗口大小时要使响应屏幕正常工作

您的获取比率和重新定位的代码应位于函数内部，您可以创建一个名为update_field_positions的函数，例如：update_field_positions（）

然后必须在2个事件中调用函数，分别是onload和window.resize

示例：

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

Tou应该使用onload，以使等待的对象在与它们一起使用之前准备就绪，以避免错误和window.onresize更改新的window.innerWidth

另一个问题是可以将窗口调整为小于图像的大小

然后您必须创建一些代码来处理这些情况：

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

Answer 3

我对后面的一幅图像进行了响应式布局，并对所有字段和文本进行了大小调整和重新定位。我不会在这里放所有代码，然后我说过要在事件窗口调整大小并加载时在名为“ 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);
}

我需要将图像放置在背景图像的底部，并在调整窗口大小时将它们留在原处

3 个答案: