如何調整基於所述調整後的圖像的比例的頂部/左/寬度/高度，使用jquery

如何調整基於所述調整後的圖像的比例的頂部/左/寬度/高度，使用jquery如何調整基於所述調整後的圖像的比例的頂部/左/寬度/高度，使用jquery

我試圖

$(window).bind('resize', function() { 
    reposition(); 

    var maxWidth = $(window).width(); // Max width for the image 
    var maxHeight = $(window).height(); // Max height for the image 

    var ratio = 0; // Used for aspect ratio 
    var width = $(this).width(); // Current image width 
    var height = $(this).height(); // Current image height 
      /
    $('.hotspot').each(function() { 

     // Check if the current width is larger than the max 
     if (width > maxWidth) { 
      ratio = maxWidth/width; // get ratio for scaling image 
      $(this).css("width", maxWidth); // Set new width 
      $(this).css("height", height * ratio); // Scale height based on ratio 
      height = height * ratio; // Reset height to match scaled image 
      width = width * ratio; // Reset width to match scaled image 
     } 

     // Check if current height is larger than max 
     if (height > maxHeight) { 
      ratio = maxHeight/height; // get ratio for scaling image 
      $(this).css("height", maxHeight); // Set new height 
      $(this).css("width", width * ratio); // Scale width based on ratio 
      width = width * ratio; // Reset width to match scaled image 
      height = height * ratio; // Reset height to match scaled image 
     } 
    }); 
});

來源

2013-10-29 Peter Jennings

...以及它是如何工作的出來嗎？ – Moob

我在圖像上有一些熱點（鏈接佔位符）。當我最小化窗口時，它們不會縮小 –

對不起，我不知道'圖像上的佔位符'是什麼意思。你可以做一個[JSFiddle]（http://jsfiddle.net）來說明問題。 – Moob

你可以使用CSS這和你的所有「熱點」的大小和位置的百分比。

HTML

<div id="imageWithHotspots"> 
    <img src="http://placehold.it/400x200&text=hotspots+here+and+here" /> 
    <a href="#" class="hotspotA" title="Hotspot A"></a> 
    <a href="#" class="hotspotB" title="Hotspot B"></a> 
</div>

CSS

html, body {margin:0;width:100%; height:100%;} 
#imageWithHotspots {width:100%; height:50%;position:relative;} 
#imageWithHotspots img {width:100%; height:100%;} 
#imageWithHotspots a { 
    background:rgba(20,100,100,.5); 
    display:block; 
    position:absolute; 
} 
#imageWithHotspots a:hover { 
    background:rgba(200,100,10,.5); 
} 
#imageWithHotspots .hotspotA { 
    top:48%; 
    left:45.2%; 
    height:6.6%; 
    width:8.5%; 
} 
#imageWithHotspots .hotspotB { 
    top:48%; 
    left:62%; 
    height:6.6%; 
    width:8.5%; 
}

Example JSFiddle

來源

2013-10-30 10:36:48 Moob

如何調整基於所述調整後的圖像的比例的頂部/左/寬度/高度，使用jquery

回答

相關問題