js resize

1. 前言

在网页开发中，经常需要对图片进行尺寸调整，以适应不同的屏幕大小或布局要求。JavaScript是一种常用的脚本语言，提供了丰富的方法和API，可以方便地实现图片的尺寸调整功能。本文将介绍如何使用JavaScript来实现图片的尺寸调整，并给出相关的代码示例和运行结果。

2. HTML中的img元素

在HTML中，可以使用<img>元素来插入图片。<img>元素有两个重要的属性，即src和style。src用于指定图片文件的路径，而style用于指定图片的样式，包括尺寸、边框、边距等。

下面是一个简单的HTML代码示例，展示了如何插入一张图片并设置其尺寸：

<!DOCTYPE html>
<html>
<head>
    <title>图片尺寸调整示例</title>
</head>
<body>
    <img src="example.jpg" style="width: 200px; height: 150px;">
</body>
</html>

在上述代码中，src属性指定了图片文件的路径为”example.jpg”，而style属性设置了图片的宽度为200像素，高度为150像素。

3. JavaScript实现图片尺寸调整

为了实现图片的尺寸调整，我们可以使用JavaScript来动态地修改<img>元素的style属性。通过改变style属性的width和height值，即可改变图片的大小。

下面是一个简单的JavaScript代码示例，实现了点击按钮时调整图片尺寸的功能：

<!DOCTYPE html>
<html>
<head>
    <title>图片尺寸调整示例</title>
</head>
<body>
    <img id="myImage" src="example.jpg" style="width: 200px; height: 150px;">
    <br>
    <button onclick="resizeImage()">调整图片尺寸</button>

    <script>
        function resizeImage() {
            var img = document.getElementById("myImage");
            img.style.width = "300px";
            img.style.height = "200px";
        }
    </script>
</body>
</html>

在上述代码中，我们首先给<img>元素添加了一个id属性，以便通过JavaScript代码获取该元素。接着，在按钮的onclick事件中调用了resizeImage()函数。该函数首先通过getElementById()方法获取到<img>元素，并将其赋值给img变量。然后，通过修改img元素的style属性的width和height值，实现了调整图片尺寸的功能。

点击按钮后，图片的宽度会变为300像素，高度变为200像素。

4. 动态调整图片尺寸

上述示例中只是演示了如何通过JavaScript一次性改变图片的尺寸，实际开发中，我们可能需要根据不同的情况来动态调整图片的尺寸。例如，根据屏幕宽度来适应不同的设备。

下面是一个示例代码，展示了如何通过JavaScript动态调整图片的宽度，使其自适应不同的屏幕大小：

<!DOCTYPE html>
<html>
<head>
    <title>动态调整图片尺寸示例</title>
</head>
<body>
    <img id="myImage" src="example.jpg" style="width: 100%;">

    <script>
        function resizeImage() {
            var img = document.getElementById("myImage");
            var screenWidth = window.innerWidth; // 获取屏幕宽度
            img.style.width = screenWidth + "px"; // 设置图片宽度为屏幕宽度
        }

        // 当窗口大小改变时，调用resizeImage()函数
        window.onresize = resizeImage;
    </script>
</body>
</html>

在上述代码中，我们首先将<img>元素的style属性的宽度设置为100%，使其自适应父元素的宽度。然后，定义了一个resizeImage()函数，该函数获取了屏幕的宽度（使用window.innerWidth），并将其赋值给screenWidth变量。最后，通过修改img元素的style属性的宽度值为screenWidth + "px"，实现了动态调整图片宽度的功能。

当浏览器窗口大小改变时，resizeImage()函数会被调用，从而根据当前的屏幕宽度调整图片的宽度。