Question

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

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

页面的原始大小为1299像素×1794像素

新尺寸为512px×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很难测试，但我通过在transform: scale(.83)!important上添加.annotLink设法获得了良好的比例。

通过一些翻译稍微调整它，你应该拥有它！

您甚至可以使用Javascript动态调整这些值。

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

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

1 个答案: