動態定位縮放的html圖像

有一張地圖放置在html頁面上作爲背景圖像。還有一個透明圖像，表示來自地圖上某個點的聲波，即波浪的中心。當波形圖像以全尺寸放置在地圖頂部時，波形圖像的中心位於正確位置（指向地圖上所需的中心點），並使用#waveImage {position:absolute;bottom:0;right:0} css規則。動態定位縮放的html圖像

問題是我需要基於任意算法動態縮放波形圖像，從不大於其原始大小。顯然，當圖像較小時，由於初始css定位，中心點從原始中心偏移到右側和底部，所以我必須移動波形圖像，以便波形的中心仍然指向相同在地圖上的位置。我需要的是從右邊和底部計算正確偏移量的算法。

一些信息可能會有幫助：波形圖像是673px x 655px大，波浪的中心不在圖像的中心。

來源

2012-07-07 egemadra

請告訴我們你已經嘗試了什麼。或者，至少，你有什麼。你有沒有試圖解決這個問題？你能否向我們展示一下你在[JS Fiddle]（http://jsfiddle.net/）或類似工作中的實況（代表性，[SSCCE]（http://sscce.org/））演示？ – 2012-07-07 22:58:59

你可以在這裏找到一個問題的交互式演示（https://egemadra.net/demo1/）。當您更改新的寬度值時，波形圖像將重新縮放。您可以使用相關輸入框來調整右側和底部偏移量。我所嘗試的是準備這個演示來了解這個公式。編輯：我在地圖上放了一個黑點，以便它可以代表靜態中心，它的位置不一定非常精確，它只是爲了給出一個想法。 – egemadra 2012-07-07 23:32:26

請參閱CSS的「縮放」，「變換」，「變換原點」等功能。 – biziclop 2012-07-08 07:47:00

http://jsfiddle.net/k7uGu/6/

HTML：

<div class="map"> 
    <div class="signal-wrap"> 
     <img class="signal" src="signal.png"> 
    </div> 
</div>

CSS

.map { 
    background: url(map.png) no-repeat; 
    position: relative; 
    width: 770px; 
    height: 688px; 
} 

.signal-wrap { 
    position: absolute; 

    /* find/set the center position on the map, 
     using the right bottom corner for positioning 
     to avoid "surprise" scrollbars appearing 
    */ 
    right: 28%; 
    bottom: 33%; 

    /* change these to resize signal. 
     you can always use a square shape (width=height), 
     even if the image inside is not square 
    */ 
    width: 10%; 
    height: 10%; 
} 

.signal { 
    display: block; 
    position: absolute; 

    /* image width will be equal to parent square's size 
     height must not be set to keep original image shape 
    */ 
    width: 100%; 

    /* position of the center of the signal 
     relative to the parent square 
    */ 
    right: -23%; 
    bottom: -20%; 
}

來源

2012-07-08 07:45:28 biziclop

這是一個非常有創意和鼓舞人心的工作，謝謝。我沒有得到的是你如何發現這些神奇的數字，即正確的：-23％;底部：-20％;當信號在尺寸上發生變化時，通過保持中心穩定，似乎可以做到這一點。 – egemadra 2012-07-10 06:06:52

它們標記着波浪的中心，我只是調整它們直到它看起來不錯。當然，你可以測量你的原始圖像，並使用'100 *（wave_center_x - image_width）'或'100 - 100 *（wave_center_x - image_width）'。 – biziclop 2012-07-10 06:10:53

例如：http://jsfiddle.net/G3Fuj/ :) – biziclop 2012-07-10 06:18:19

動態定位縮放的html圖像

回答

相關問題