为何figure容器内img的:hover transform无响应，容器本身正常？

用户的代码如下：

HTML代码 #

<h1 id="title">Leo Tolstoy</h1>
<p class="subtext" id="subheader">An extremist with a cool beard</p>
<figure id="img-div">
    <img id="image" src="tolstoi-portrait.jpeg"/>
    <figcaption id="img-caption" class="subtext">Tolstoy thinking about salvation</figcaption>
</figure>

CSS代码 #

#img-div{
    background-color: var(--color-pink);
    border-radius: 5px;
    padding:2rem;
    padding-bottom:0;
    margin:1rem auto;
}

#img{
    display: block;
    transition: transform 1s;
}

#img:hover{
    transform: scale(1.05,1.05);
}

问题原因 #

CSS选择器不匹配：HTML中img的id是image，但CSS里写的是#img，这个选择器找不到对应的元素，所以transition和hover缩放的样式完全没作用在img上。

修正方案 #

把CSS中的#img替换成#image，同时建议给img添加max-width: 100%，避免缩放后超出figure容器的范围：

#img-div{
    background-color: var(--color-pink);
    border-radius: 5px;
    padding:2rem;
    padding-bottom:0;
    margin:1rem auto;
    overflow: hidden; /* 可选，防止图片缩放后超出容器显示 */
}

#image{
    display: block;
    max-width: 100%; /* 确保图片在容器内适配 */
    transition: transform 1s;
}

#image:hover{
    transform: scale(1.05,1.05);
}

修正后，img就能正常响应hover事件，实现平滑的缩放效果了。

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