如何使我的宽度/高度变换居中？

Question

所以，我试图让图像在悬停时旋转 360 度并放大 1.4 倍，所有图像的中心都保持在原位。我试过这个：

.logo img[data-v-4fbac4e1] {
width: 50px;
height: 50px;
content: url(https://i.imgur.com/txz1IXI.png);
transition: width 2.0s, height 2.0s, transform 2.0s;
}

用这个：

.logo img[data-v-4fbac4e1]:hover{
    width: 65px;
    height: 65px;
    transform: rotate(360deg);
}

它工作正常，但它在扩展时会偏离中心。如何确保宽度和高度从中心增加，使其保持在同一个地方？抱歉，如果这看起来很简单，我是 CSS 新手。

编辑：我使用的 HTML 部分如下所示：

<a data-v-4fbac4e1 href="/home" class="logo">
    <img data-v-4fbac4e1 src="/img/icons/icon.svg">
</a>

如果需要更多，我可以添加它，但这是我要转换的图像的 HTML。

Answer 1

由于我不完全确定您的意思，请指出您的罪魁祸首，我们会帮您解决问题，但这里有一些技术差异的示例。

img, div {
  display: inline-block;
  margin: 1rem;
  height: 10rem;
  width: 10rem;
}

.fancy-img1, .fancy-img3 {
  object-fit: cover;
  outline: red 2px solid;
}

.fancy-img2, .fancy-img4 {
  background: url(https://picsum.photos/200) no-repeat center center / cover;
  outline: blue 2px solid;
}

/* grow by height value change transition */
.fancy-img1 {  
  transition: transform .5s, height .5s;
}

.fancy-img2 {
  transition: transform .5s, height .5s;
}

.fancy-img1:hover, .fancy-img2:hover {
  transform: rotate(360deg);
  height: 15rem;
}

/* Scale with transition */
.fancy-img3 {  
  transition: transform .5s;
}

.fancy-img3:hover {
  transform: scaleY(1.5) rotate(360deg);
}

/* Scale with keyframes */
@keyframes spinGrow {
  to { transform: scaleY(1.5) rotate(360deg); }
}

.fancy-img4:hover {
  animation: spinGrow .5s forwards;
}

<h2>Are you talking about transition height which cause the jumpy effect?</h2>

<img class="fancy-img1" src="https://picsum.photos/200">

<div class="fancy-img2"></div>

<h2>Or actually scale so it remains in its original position?</h2>

<img class="fancy-img3" src="https://picsum.photos/200">

<div class="fancy-img4"></div>