HTML初始調整圖像大小和更改位置

在我的代碼中，我在具有地圖區域的div內有一個圖像，並且根據從URL傳遞的變量，我希望圖像最初在變量給出的區域上縮放。我使用imagemapster來實現交互式地圖功能，雖然JQuery Plugin具有調整大小的功能，但它只調整左上角的圖像大小。我希望將圖像調整到所選區域的位置，換句話說，就是初始區域縮放。HTML初始調整圖像大小和更改位置

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Demo</title> 
<script src="jquery.min.js"></script> 
<script src="imagemapster.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
    <div style = "width:867px; height:1109px; border:0; overflow: auto; float:left;"> 
     <img name="front" src="zoo.png" style="max-width:100%;" id="frontmap" usemap="#m_front" alt=""/> 
    </div> 
    <map name="m_front" id="m_front"> 
     <area id = "1" shape="poly" coords="56,45,57,257,468,46" href="#" /> 
     <area id = "2" shape="poly" coords="519,166,697,324,699,186" href="#" /> 
     <area id = "3" shape="circle" coords="397,533,224" href="#" /> 
     <area id = "4" shape="rect" coords="647,730,725,851" href="#" /> 
     <area id = "5" shape="rect" coords="118,765,280,855" href="#" /> 
     <area id = "6" shape="rect" coords="271,862,683,1031" href="#" /> 
    </map> 
    <script> 
     var i = "1"; 
     $(document).ready(function() 
     { 
      var image = $('#frontmap'); 
      image.mapster 
      ({ 
       fillColor: '000000', 
       fillOpacity: 0.8, 
       staticState: false 
      }); 
     }); 
    </script> 
    </body> 
</html>

我試着用CSS尋找解決方案，但其中大多數沒有執行我想要的，並重新定位圖像或裁剪區域。任何有關如何讓圖像初始縮放到我想要的區域的建議，並且仍然可以通過div滑塊查看圖像的其餘部分？

來源

2017-08-10 Alan Deng

您可以使用scrolleft和scrolltop滾動到您想要關注的位置。就像這個例子：

$('div').scrollTop(200) 
 
$('div').scrollLeft(220)

div {width: 200px; height: 200px; overflow: scroll}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><img src="http://texel.is/wp-content/uploads/2015/10/Schaap-800x445.jpg"></div>

來源

2017-08-10 20:19:47

HTML初始調整圖像大小和更改位置

回答

相關問題