大佬教程收集整理的这篇文章主要介绍了如何将我的宽度/高度转换居中？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以，我试图让图像在悬停时旋转 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。
因为我不完全确定你的意思，指出哪个是你的罪魁祸首，我们会帮你解决，但这里有一些技术之间差异的例子。
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>以上是大佬教程为你收集整理的如何将我的宽度/高度转换居中？全部内容，希望文章能够帮你解决如何将我的宽度/高度转换居中？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。