简介

缩略图 html 是一种常用于网页设计和开发中的技术。通过使用缩略图 html 技术，可以将大图缩小，以便在页面中快速加载和显示，从而提升用户体验。

实现方法

实现缩略图 html 的方法有很多。以下是其中一种比较常用的方法：

HTML 代码

<a href="大图.jpg">
    <img src="缩略图.jpg" alt="图片">
</a>

CSS 代码

a {
    display: block;
    position: relative;
    width: 缩略图宽度;
    height: 缩略图高度;
}

a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

JavaScript 代码

// 获取所有需要添加缩略图的链接元素
var linkElements = document.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]');

// 遍历链接元素并添加缩略图
linkElements.forEach(function(linkElement) {
    var originalImage = new Image();
    originalImage.src = linkElement.href;
    originalImage.addEventListener('load', function() {
        var thumbnailImage = new Image();
        thumbnailImage.src = generateThumbnail(originalImage, 缩略图宽度, 缩略图高度);
        linkElement.appendChild(thumbnailImage);
    });
});

// 生成缩略图
function generateThumbnail(originalImage, width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext('2d');
    context.drawImage(originalImage, 0, 0, width, height);
    return canvas.toDataURL();
}

注意事项

使用缩略图后，要确保大图和缩略图的比例保持一致，否则会导致图片变形，影响用户体验。

参考资料

1. How to Create a Thumbnail Image for a JPEG File in HTML | Treehouse Blog
2. How to Create Responsive Images with CSS | Treehouse Blog