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

不需要为图像和悬停伪类定义相同的转换属性。如果在.logo:hover中没有定义transition，则取之前设置的值半秒。

这里的问题是您必须为图像指定初始宽度和高度才能顺利调整大小。

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;
}

现在可以使用了，但是由于动画 height/width 会导致页面重绘，所以会有点卡顿。

相反，我建议在图片上使用 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
    }

HTML、CSS：调整 IMG 的大小并在调整大小时进行过渡

HTML, CSS: Resizing the IMG with transitioning while resizing

html

css

transition

resize

image