html - 如何从坐标获取 CSS 的左、上、宽、高？

Question

我使用图像映射工具制作了 5 个矩形框，但实际上它们需要变成 <input type=text style="position:absolute; left: ??px; top: ??px; width:??px; height:??px;" /> 而不是矩形框具有正确的左、上、宽、高

图像映射工具:

https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

代码生成:

<img src="a.png" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="961, 542, 1269, 611" />
    <area shape="rect" coords="245, 300, 606, 340" />
    <area shape="rect" coords="245, 247, 605, 286" />
    <area shape="rect" coords="245, 194, 605, 234" />
    <area shape="rect" coords="246, 142, 606, 183" />
</map>

如何将生成的坐标转换为 css left, top, width, height？

Answer 1

你有 <area> 坐标x1 , y1 , x2 , y2 .

这些是相对于您图像的左上角的，我们可以假设它也是 <div> 的左上角。其中将包含您的 <input>元素 x1是left和 y1是top .

<div>应该有 position: relative和 <input>有position: absolute .

或者，由于您似乎需要它们右对齐，您可以忽略 x1值并设置 right: 0然后你只需要 top值(value)观。

这看起来确实是一种奇怪的布局方式，而不是使用正常流程。