在前端开发中，我们经常需要在网站中使用图片。有时候我们需要动态地调整图片的大小来适应特定的展示效果，例如在响应式设计中。本文将介绍如何使用JavaScript来实现图片大小的调整，而不需要使用Canvas和Base-64。
使用HTML中的![]()
元素
在HTML中，我们可以使用<img>元素来展示图片。该元素有两个属性：width和height，分别表示图片的宽度和高度。我们可以通过设置这两个属性来调整图片的大小。
<img src="image.jpg" width="200" height="100">
上面的代码将展示一个宽度为200像素、高度为100像素的图片。但是，这种方法有一个问题，即如果我们只设置一个属性（例如只设置宽度），则浏览器会自动计算另一个属性的值。这可能会导致图片失真或拉伸，并且不利于页面性能。
使用JavaScript调整图片大小
为了解决上述问题，我们可以使用JavaScript来动态地调整图片大小。首先，我们需要获取图片对象：
const image = new Image(); // 创建一个Image对象 image.src = 'image.jpg'; // 设置图片的路径
接下来，我们可以等待图片加载完成后，计算出新的宽度和高度，并将其设置为<img>元素的属性：
-- -------------------- ---- -------
------------ - ---------- - -- --------
----- ------------- - ------------ -- ------
----- -------------- - ------------- -- ------
----- ----- - ------------- - --------------- -- ------
----- -------- - ---- -- ------
----- --------- - ---- -- ------
--- --------- ----------
-- -------------- - --------- - -- ----------------
-------- - ---------
--------- - -------- - ------
- ---- -
-------- - --------------
--------- - ---------------
-
-- ---------- - ---------- - -- ----------------
--------- - ----------
-------- - --------- - ------
-
----- ---------- - ------------------------------ -- -------------
-------------- - ------------ -- ------
---------------- - --------- -- ----
----------------- - ---------- -- ----
-------------------------------------- -- --------------
--上面的代码中，我们首先计算出原始图片的宽高比例。然后，我们设置了最大的宽度和高度，并根据比例计算出适当的新宽度和高度。最后，我们创建了一个新的<img>元素，并将其添加到页面中。
总结
在本文中，我们介绍了如何使用JavaScript来调整图片大小，而不需要使用Canvas和Base-64。通过获取图片对象并计算新的宽度和高度，我们可以动态地调整图片大小，并且能够避免失真和拉伸的问题。这种方法可以提高页面性能和用户体验，是前端开发中非常实用的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24216