html - 如何在不同尺寸的屏幕上用背景图片在合适的位置设置表格

Question

我有一张背景图片 width: 100%; 和 height: auto;

我想在图像的特定部分显示形式。问题是随着设备的变化，表单特定部分的位置也发生了变化。

引用图片:

我已经尝试了几种流行的屏幕尺寸，如图所示 here与媒体查询。

@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%，并检查 Angular 的坐标。我已经这样做了 - 坐标是正确的。 ;)