Question

我在父容器中有一个位置相对的响应式图像。在同一个父容器中，我有一个位置：图像上的绝对图钉具有更高的z-index值。

Pin在静态设计上显示在正确的位置但是如果我想使其适用于响应，则看起来浏览器不能正确计算百分比并且引脚不会显示在正确的位置。

为了解决这个问题，我使用了jquery来计算响应式img大小（以像素为单位），还计算了pin的css左侧和顶部位置（以像素为单位）。但这仍然行不通。

HTML

<div class="col-xs-12" id="map">
            <img src="../img/world-map.jpg" alt="world-map" id="world-map">
            <a href="#" class="sydney" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="melbourne" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="perth" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="singapore" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="hongkong" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="india" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="china" data-toggle="modal" data-target="#sydney-modal"></a>
</div> <!-- end col map-->

指向测试页的链接：http://test.nsg.unsw.edu.au/contact/

LESS

#map
    {
        position:relative;
        #world-map
        {
            width:100%;
            z-index:-100;               
        } //end word-map
        .sydney{
            position:absolute;
            width:12px;
            height:12px;
            background-color:red;
            /*left: 81.5%;
            top: 77.5%;*/
            }
    }

Javascript解决方案

$( document ).ready(function() {
        $('nav li:contains("Contact us")').addClass("active");

        //get width and height of image in px
        var imgWidth=$("#world-map").width();
        var imgHeight=$("#world-map").height();
        //console.log("image width x height ="+imgWidth+"x"+imgHeight);
        //change icon position according to the percantage of where location is found
        var sydneyLeft=0.815;
        var sydneyTop=0.775;
        //console.log("location left x top % ="+sydneyLeft+"x"+sydneyTop);
        var sydneyLeftpx=0.815*imgWidth;
        var sydneyToppx=0.775*imgHeight;
        //console.log("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx);

        sydneyLeftpx=toInt(sydneyLeftpx);
        sydneyLeftpx=sydneyLeftpx-6; //location-pinwidth
        sydneyToppx=toInt(sydneyToppx);
        sydneyToppx=sydneyToppx-6; //location-pinheight

        //alert("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx);

        $(".sydney").css({left: sydneyLeftpx+"px",
                        top: sydneyToppx+"px"               
            });

});

注意：我还没有为javascript代码添加屏幕调整大小功能，只是通过刷新浏览器窗口来测试代码。

有人可以说明为什么没有正确计算这些值，我该如何解决这个问题？

Answer 1

<强>问题

我想使用img标签创建一个html地图标签，其中包含较小的z-index，以及img标签上的引脚/位置。

我能够成功地进行静态设计，但它对响应式设计图像没有相应的作用。最初，我试图通过使用css百分比来解决这个问题，但是针对不同屏幕尺寸的引脚/位置位置总是不同的。我尝试通过计算图像宽高比来解决问题，然后使用Javascript以像素为单位更改引脚位置。它也没用。

<强>解决方案

我使用HTML地图标记和区域标记解决了这个问题。我使用Matt Stow的一个插件来使地图响应。 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

绝对定位元素的CSS left和top属性不会按响应设计的预期计算

1 个答案: