How to implement image thumbnail function in JavaScript?

How to implement image thumbnail function in JavaScript?

When we display images on a web page, sometimes we need to reduce the original large image to adapt to the layout requirements of the page, which requires the use of the image thumbnail function. In JavaScript, we can implement the thumbnail function of images through the following methods:

1. Use HTML to directly set the width and height of the image

The simplest way Just set the width and height attributes of the image directly in HTML to achieve the thumbnail effect. For example:

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="缩略图">

This will scale down the image to a width of 200 pixels and a height of 150 pixels and display it on the web page.

2. Use CSS to scale images

Use the scale() method in the transform attribute of CSS to achieve image scaling. The code example is as follows:

<style>
.thumbnail {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.thumbnail img {
    transform: scale(0.5); /* 缩放比例为50% */
    transform-origin: 0 0; /* 设置缩放起点为左上角 */
}
</style>

<div class="thumbnail">
    <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="缩略图">
</div>

This will scale the image to 50% of the original size and display it in the container. The part that exceeds the container size will be hidden.

3. Use JavaScript to control image size

JavaScript provides the ability to manipulate DOM elements. We can implement the thumbnail function by modifying the width and height attributes of image elements. The code example is as follows:

<script>
function resizeImage() {
    var image = document.getElementById("image");
    image.width = 200;
    image.height = 150;
}
</script>

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"  id="image" alt="缩略图">
<button onclick="resizeImage()">缩略图</button>

After clicking the button, the width and height of the image will be modified to 200 pixels and 150 pixels.

4. Use third-party libraries

In addition to writing your own code to implement the image thumbnail function, you can also use ready-made JavaScript libraries to simplify the development process. For example, commonly used third-party libraries such as jQuery and Bootstrap provide image thumbnail functionality.

The sample code using jQuery is as follows:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $("#thumbnail").click(function() {
        $("#image").css({
            width: "200px",
            height: "150px"
        });
    });
});
</script>

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"  id="image" alt="缩略图">
<button id="thumbnail">缩略图</button>

The above are several commonly used JavaScript methods to implement the image thumbnail function. You can choose the appropriate method to use according to actual needs. Whether you set properties directly, use CSS zoom, control through JavaScript, or use a third-party library, you can easily achieve the thumbnail effect of images.

The above is the detailed content of How to implement image thumbnail function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!