如何为 jpg 文件创建响应式视口，供用户缩放、滚动和点击

How to create a responsive viewport for a jpg file for a user to zoom and scroll and tap?

本文关键字：缩放 用户 滚动 jpg 文件创建 响应 视口      更新时间：2023-09-26

我想创建一个类似谷歌地图的视口：

  • 视口旁边会有一个粘性侧边栏，用于显示诸如在图像上单击的内容列表之类的内容。
  • 与常规 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

相关文章：