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 に答える