HTML, CSS: 调整IMG的大小，同时进行过渡。

Question

我有这个代码...

<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->

...还有这个

.logo {
    transition: .5s;
}

.logo:hover {
    transition: .5s;
    width: 128px;
    height: 128px;
}

悬停时可以调整大小，但过渡时不能调整大小。我只是把它悬停在空中，它就会立刻调整大小，我不知道为什么 transition 不工作。

Answer 1

没有必要为图片和悬停伪类定义相同的过渡属性。如果你不定义 transition 在 .logo:hover，它将采用之前设定的半秒值。

这里的问题是，你必须为图像指定一个初始的宽度和高度，以便让它顺利地调整大小。

Answer 2

有几个地方的CSS出了问题，导致它不能过渡。

首先，正如@WaisKamal所说，你需要设置初始状态来过渡。图片在HTML中会自动调整大小，但这不是CSS的有效出发点。

其次，你需要定义什么属性被过渡。

所以你需要添加宽度和高度。或者你可以使用 all 的标识符。

.logo {
   display:block; //make sure the image is a block element
   width: 96px;
   height: 96px;
   transition: all 0.5s linear;
}
.logo:hover {
   width: 128px;
   height: 128px;
}

现在可以用了，但是会很不顺手，因为动画高度宽度会导致页面重绘。

相反，我建议使用 transform 在图像上。

.logo {
       display:block; //make sure the image is a block element
       // initial size is fine here because we're using a transform
       transition: transform 0.5s ease-in-out;
    }
    .logo:hover {
       transform: scale(2) // decimal notation 2 = 200% = 128x128px
    }