javascript - 根据页面大小移动和调整链接大小

Question

我有一个将背景设置为图像的网页，例如内容页面。除此之外，还有位于顶部的不可见链接覆盖层，因此如果用户按下正确的区域，链接就会被激活。

如果页面以较小的分辨率加载背景，链接显然不会改变，但我似乎无法计算出调整大小并将叠加层移回正确位置的公式。

页面的原始大小是 1299px x 1794px

新尺寸为 512px x 707px

覆盖层的 css 是:

<section class="annotLink" style="border-width: 0px; width: 262.217px; 
    height: 342.867px; border-color: rgb(0, 0, 0); left: 347.126px; top: 72.379px; 
    position: absolute; transform: matrix(2.181, 0, 0, 2.181, -78.516, -78.516); 
    transform-origin: -339.126px -44.379px 0px;">    
<div style="top: -4px; left: -4px; bottom: -4px; right: -4px;" 
     class="annotationHighlight" hidden="true"></div>    
<a class="internalLink" onclick="event.preventDefault(); JumpToPage(40)" 
     href="javascript:void(0);" title=""></a>    
</section>    

感谢任何帮助，如果您需要更多信息，请直接询问。

编辑

可以看到他们在这里工作:

原始尺寸: http://adamdevarea.x10host.com/page-fits.html

新尺寸: http://adamdevarea.x10host.com/page-doesnt-fit.html

Answer 1

这绝对是可行的。很难用 Firebug 进行测试，但我通过在 .annotLink 上添加 transform: scale(.83)!important 设法获得了良好的比率。

用一些翻译稍微调整一下，你应该拥有它!

您甚至可以使用 Javascript 即时调整这些值。

PS:这个页面很快就会让你很头疼......:) 这么多神奇的数字......你好来自法国!