4

不要被这篇文章的长度吓倒！（我刚刚从 jsfiddle 复制了代码）

我正在尝试修复适合所有屏幕尺寸而不会失真的图像（“地图”）上的“针脚”（即最大高度和最大宽度为 100%），并且我已经设法使针脚有些固定. 然而，虽然下面的代码（在 jsfiddle 中）看起来适用于某些尺寸，但随着窗口尺寸的变化，引脚会慢慢地远离它们的位置。看看：（如果您没有看到小提琴本身的变化，您可以尝试将代码复制并粘贴到文本编辑器上，然后在浏览器上打开它。将浏览器调整为长窄条或一条宽窄的条带，你会明白我的意思）：

http://jsfiddle.net/bKbWf/

感谢任何可以帮助解决此问题的人。

代码（与上面 jsfiddle 上的内容相同）发布在下面：（HTML）：

<div class="mapNpins"> <!--map and pins begin here-->
    <div class="map-container"><img class ="map" src="http://www.placekitten.com/1024/635"/>
        <ul class = "ulist">
            <li class="pin1"><a href="http://en.wikipedia.org/wiki/Philadelphia"><img src="http://www.placekitten.com/20/20"></a></li>
                <li class="pin2"><a href="http://en.wikipedia.org/wiki/Boston"><img src="http://www.placekitten.com/20/20"></a></li>
        </ul>
    </div> <!-- map and pins end here -->
</div>

（CSS）：

.mapNpins { /*can be used to  manipulate/position the entire mapNpins block*/
display: block; 
border: 2px solid red;}

.map-container {
position: relative; /*this is so that later each list-element
    (i.e. pin) can be positioned with respect to the map-picture
        (i.e. the pins will be able to move/resize with the map)*/
text-align: center; /*centers map horizontally*/}

.map{
padding-left: 0.7%; /*misc. image correction*/
max-width: 100%; /* map image resizes with screen*/ 
max-height: 100%;/* map image resizes with screen*/}

.ulist {
list-style: none; /*to remove the bullets*/}

.ulist li a {
display: block;
position: absolute; /*allows each list-element to be controlled
         individually, but all with respect to .map-container (which
            is the first parent that has pos-relative)*/}


/*positioning the pins*/
.map-container .ulist .pin1 a {
text-align: center; 
border: 2px solid orange; /*border color only for recognition*/
left: 25%; top:37%;}

.map-container .ulist .pin2 a {
border: 2px solid blue; /*border color only for recognition*/
left: 35%; top:47%;}
4

1 回答 1

0

您可以尝试一个 jquery for 循环：

$(window).load(function(){
    $(window).resize(function(){
    for(i = 1; i <= 2000; i++) {
    if($(window).width() === i) {
        // set the css due to the ratio
        $('.pin1').css('margin-left', ($('.pin1').css('margin-left') + i));
    }
    }
    });
});
于 2013-07-16T08:04:06.450 回答