如何用JS和CSS实现图片点击放大居中、再次点击还原？现有代码存问题

一、修复点击切换放大/还原功能 #

原函数只执行放大操作，未判断当前状态。通过添加/移除CSS类的方式实现切换，更易维护：

修改JS代码： #

function enlargeImg(img) {
    // 切换类来控制放大/还原状态
    img.classList.toggle('enlarged');
}

新增对应CSS类： #

.enlarged {
    transform: scale(1.5);
    transition: transform 0.25s ease;
}

每次点击图片时，会自动切换enlarged类，实现放大和还原的交替效果。

二、修复图片居中显示问题 #

图片默认是inline-block元素，margin: auto不生效；同时width:100%会让图片占满容器，放大后易溢出。推荐用Flex布局解决：

修改CSS代码： #

.dream {
    display: flex;
    flex-wrap: wrap; /* 图片超出宽度自动换行 */
    justify-content: center; /* 水平居中 */
    gap: 15px; /* 图片间的间距 */
    padding: 10px;
}

.dream img {
    width: 30%; /* 自定义每张图片的基础宽度 */
    cursor: pointer; /* 提示可点击 */
    transition: transform 0.25s ease; /* 将过渡效果移到默认样式，避免重复设置 */
}

如果不想用Flex，也可以把图片设为块级元素：

.dream img {
    display: block;
    margin: 0 auto 10px; /* 水平居中+底部间距 */
    width: 80%;
    cursor: pointer;
    transition: transform 0.25s ease;
}

完整代码示例 #

HTML #

<div class="container">
    <div class="heading">
        <h3>Photo <span>Gallery</span></h3>
    </div>
    <div class="box">
        <div class="dream">
            <img src="./tucson/DSC03046.JPG" onclick="enlargeImg(this)">
            <img src="./tucsonBW/nutsNBoltsBW.jpg" onclick="enlargeImg(this)">
            <img src="./nature/deadTree.JPEG" onclick="enlargeImg(this)">
            <img src="./nature/honeyBee.JPG" onclick="enlargeImg(this)">
            <img src="./tucsonBW/mailBoxBW.jpg" onclick="enlargeImg(this)">
        </div>
    </div>
</div>

CSS #

.dream {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

.dream img {
    width: 30%;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.dream img.enlarged {
    transform: scale(1.5);
    z-index: 10; /* 放大后提升层级，避免被其他图片遮挡 */
    position: relative;
}

JS #

function enlargeImg(img) {
    img.classList.toggle('enlarged');
}

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