在前端开发中，我们经常需要使用图片地图或者图片来实现一些交互功能。但是，在不同的设备上，图片地图或者图片可能会显示不同的大小，这就需要我们动态地调整它们的大小。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现动态调整图片地图和图片大小的效果。
动态调整图片地图大小
当图片地图中的热点区域坐标是基于原始图片大小计算的时候，如果图片缩放了，那么热点区域也需要相应地进行缩放。下面是一个实现动态调整图片地图大小的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
--------- ---------
------ -----
------- -----
-
--- -
-------- ------
------ -----
------- -----
-
---- -
-------- -----
-
--------
-------
------
---- -------------
---- ------------------------ ------------- ------ ------------------- --
---- -----------------
----- ------------ -------------------- -------- --
----- -------------- ------------------- -------- --
----- ------------ -------------------------------- -------- --
------
------
--------
----- ----- - ------------------------------
----- --- - ------------------------------
-------- ----------- -
----- ----- - ----------- - -------------------
----- ----- - ---------------------------------------------
-------------------- -- -
----- -------------- - ---------------------------------------
----- --------- - -------------------------- --
---------------- - ------
--
--------------------------- ---------------------
---
-
--------------------------------- -----------
------------------------------ -----------
---------
-------
-------上述代码中，我们使用 CSS 将图片和地图的宽度设置为相对于父元素的百分比，并且通过 JavaScript 计算实际缩放比例，然后将每个区域的坐标乘以该比例得到新的坐标。
动态调整图片大小
在某些情况下，我们需要动态地调整单张图片的大小，以适应不同大小的屏幕。下面是一个实现动态调整图片大小的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
--- -
------ -----
------- -----
-
--------
-------
------
---- -------------
---- ------------------------ ------------- ------ --
------
--------
----- ----- - ------------------------------
-------- ------------- -
----- ------------ - -----------------------------------------------
----- ------------ - -------------------
----- ------------- - --------------------
----- ----------- - ------------ - --------------
--- -------- - -------------
--- --------- - ------------ - ------------
-- ---------- - ------------------- -
--------- - -------------------
-------- - --------- - ------------
-
----------------- - ----------------
------------------ - -----------------
-
--------------------------------- -------------
------------------------------ -------------
---------
-------
-------上述代码中，我们使用 CSS 将图片的宽度设置为相对于父元素的百分比，并且通过 JavaScript 计算实际缩放比例，然后将图片的宽度和高度设置为该比例乘以容器的宽度。如果计算出来的高度超过了窗口的高度，则将高度设置为窗口的高度，并根据此
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30475