Question

我习惯于FIXED高度/宽度宽高比，但现在我尝试动态高度/宽度比。我为生命而离开的我无法想象如何用动态实现这一点。

例如，在H：800，W：800（固定地图），点（模拟为坐标）@ 0,0 - 0,800 - 400,400 - 800,0 - 800,800，我确切知道点与CSS的位置（左上）

这张地图是800x1000：我需要思考如何制作点数：0,0 - 0,1000 - 400,500 - 1000,0 - 1000,1000

或者说地图是900x900：点位于：0,0 - 0,900 - 450,450 - 900,0 - 900,900，等等，我想我们明白了。

这就是我用来计算DIV的大小以准备自己的动态：

var AH = $('#MapBox').outerHeight(true);
var AW = $('#MapBox').outerWidth(true);

对于固定点，我用过但无法弄清楚动态：

tX = parseFloat(item.FieldID % 800);
tY = parseInt(item.FieldID / 800);

提前致谢！

Answer 1

有很多方法可以实现您的目标。根据坐标的来源，您可以在javascript或css中修复此问题。（我看到你使用MapBox，也许你想要做的事情也可以在那个库中使用，但这个问题超出了这个问题。）

的Javascript

让我们说你的来源是一个坐标列表：

var coords = [
  [0, 0],
  [0, 800],
  [400, 400],
  [800, 0]
  [800, 800]
]

这些坐标基于大小为800x800的字段。让我们称之为baseSize。

baseSizeX = 800;
baseSizeY = 800;

还要定义目标尺寸：

targetSizeX = 800; // or $('#MapBox').outerWidth(true);
targetSizeY = 1000; // or $('#MapBox').outerHeight(true);

现在您需要计算可应用于坐标的比例因子。这只是比率：base / target。

scaleX = targetSizeX / baseSizeY; // 800 / 800 = 1
scaleY = targetSizeY / baseSizeY; // 1000 / 800 = 1.25

要完成，只需缩放每个坐标：

const X = 0;
const Y = 1;

for( coord of coords ){
  coord[X] = coord[X] * scaleX;
  coord[Y] = coord[Y] * scaleY;
}

CSS

如果您的坐标是静态的（例如，您想要在左上角，中间底部，右下角等处），您也可以使用CSS，无需脚本。您可以将坐标视为百分比;给出一个800x800

的容器

(0, 0)等于top: 0%; left: 0%
(800, 0)等于top: 100%; left: 0%
(400, 400)等于top: 50%; left 50%

您可以定义以下CSS：

.container {
  position: absolute;
  width: 800px;
  height: 800px;
}

.container .first-dot {
  position: absolute;
  top: 0%;
  left: 0%;
}

.container .second-dot {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Etc. */

jquery div width高度重新定位（动态）

1 个答案:

的Javascript

CSS