css - HTML/CSS 细节 : How do I place "pins" on a resizeable "map"?

Question

不要被这篇文章的长度吓到! (我刚刚从 jsfiddle 复制了代码)

我正在尝试修复适合所有屏幕尺寸而不会变形的图像(“ map ”)上的“图钉”(即最大高度和最大宽度为 100%)，并且我已经设法获得引脚有些固定。但是，尽管以下代码(在 jsfiddle 中)看起来适用于某些尺寸，但随着窗口尺寸的变化，销会慢慢离开它们的位置。看看:(如果你没有看到 fiddle 本身的变化，你可以尝试将代码复制并粘贴到文本编辑器上，然后在浏览器上打开它。将浏览器调整为长窄带或一个宽窄带，你会明白我的意思):

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%;}

Answer 1

您可以尝试使用 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));
    }
    }
    });
});