求助：点击放大按钮时如何让隐藏图片显示并将尺寸放大一倍？

嘿，你已经实现了点击按钮显示隐藏图片的功能，就差最后一步让它放大两倍啦！这里给你两种实用的解决方案，你可以根据自己的场景来选：

方案一：用CSS Transform缩放（推荐） #

这种方法最省心，不用管图片原来的尺寸，直接通过缩放变换实现两倍大小，还不会打乱页面布局（如果怕图片偏移，还可以设置缩放原点）。

修改你的点击事件代码就行：

var images = document.querySelectorAll('img.images');
var displayCount = 0;
var hideCount = 0;

document.getElementById('display').onclick = function() {
    // 先筛选出所有隐藏的图片（假设你是用display:none或者.hidden类隐藏的）
    const hiddenImages = Array.from(images).filter(img => 
        img.style.display === 'none' || img.classList.contains('hidden')
    );
    
    if (hiddenImages.length > 0) {
        // 取最后一张隐藏的图片
        const targetImg = hiddenImages[hiddenImages.length - 1];
        
        // 显示图片（根据你的隐藏方式调整，比如移除hidden类或者改display）
        targetImg.style.display = 'block'; 
        // 或者如果是用类隐藏的：targetImg.classList.remove('hidden');
        
        // 核心：放大至两倍大小
        targetImg.style.transform = 'scale(2)';
        // 可选：设置缩放原点为左上角，避免图片跑到奇怪的位置
        targetImg.style.transformOrigin = 'top left';
    }
};

方案二：直接修改图片宽高 #

如果你需要让图片在布局里占据两倍的空间，而不是单纯视觉缩放，就可以直接修改宽高属性：

document.getElementById('display').onclick = function() {
    const hiddenImages = Array.from(images).filter(img => img.style.display === 'none');
    
    if (hiddenImages.length > 0) {
        const targetImg = hiddenImages[hiddenImages.length - 1];
        targetImg.style.display = 'block';
        
        // 获取图片的原始尺寸（用getComputedStyle拿到实际渲染的大小）
        const computedStyle = window.getComputedStyle(targetImg);
        const originalWidth = parseInt(computedStyle.width);
        const originalHeight = parseInt(computedStyle.height);
        
        // 设置为两倍大小
        targetImg.style.width = `${originalWidth * 2}px`;
        targetImg.style.height = `${originalHeight * 2}px`;
    }
};

小提醒 #

• 要确保你正确选中了最后一张隐藏的图片：代码里用filter筛选隐藏的图片，再取数组最后一个元素，这个逻辑要和你实际隐藏图片的方式匹配（比如是用display:none还是CSS类）。
• 两种方案的区别：transform:scale(2)是视觉上的缩放，图片在文档流里的占位还是原来的大小；修改宽高则会改变图片在布局里的实际占空间，你可以根据需求选。

这样调整后，点击按钮就能同时显示最后一张隐藏图片，并且让它变成两倍大小啦！

内容的提问来源于stack exchange，提问作者ehsun