我想创建一个类似谷歌地图的视口:
- 视口旁边会有一个粘性侧边栏,用于显示诸如在图像上单击的内容列表之类的内容。
- 与常规 JPG 图像兼容
- 使用引导程序 3 进行响应
- 用户可以放大、捏合、轻拂图像、平移图像 用户可以单击图像
- 的某些部分,并拥有一个图像映射,该映射可以注册点击和单击,并且仍然与响应能力以及图像的缩放和平移兼容
使用 SVG 执行此操作很容易,但不幸的是,我只需要支持一个常规的旧 JPG。
假设我有一张 7600 x 5000 的巨大图像。我们不要争论图像的大小。有人可以指出我正确的方向来制作满足上述要求的视口吗?
下面的代码不起作用。当我添加.img-responsive
时,在手机上生成的图像无法放大。我永久处于缩小状态。如果我没有.img-responsive
图像不再响应...
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/assets/images/floorplan.jpg" width="7600" height="5000" border="0" usemap="#map" class="img-responsive" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<area shape="circle" coords="323,2661,19" alt="point1" href="#" />
<area shape="circle" coords="367,2691,19" alt="point2" href="#" />
<area shape="circle" coords="434,2680,18" alt="point3" href="#" />
<area shape="circle" coords="6549,478,17" alt="point4" href="#" />
<area shape="circle" coords="3907,4582,22" alt="point5" href="#" />
</map>
</div>
</div>
</div>
.img-responsive
类仅设置图像的max-width: 100%
,使其适合您的屏幕大小(或视口)。
如果图像不应重新缩放但适合屏幕,请尝试以下操作:
.html:
<div class="container"><div class="row"><div class="col-md-6">
<div class="holder">
<img src="http://lorempixel.com/1900/1000/sports/">
<div>
</div></div></div></div>
.css:
.holder {
max-width:100%;
max-height: 150px;
overflow-x: auto;
overflow-y: auto;
}
另请注意,重新缩放图像也会网格化地图的坐标。另请参阅:https://github.com/stowball/jQuery-rwdImageMaps