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

Move and resize link based on page size

本文关键字：链接 调整 移动      更新时间：2023-09-26

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

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

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

新尺寸为 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 不适合.html

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

用一些翻译再调整一下，你应该拥有它！

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

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

相关文章：