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滑块查看图像的其余部分？

答

您可以使用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>

HTML初始调整图像大小和更改位置

相关推荐