html - 旋转改变图像高度

Question

我有将图像无限旋转 360 度的代码。一切似乎都很好，但图像的旋转导致图像调整大小，即页面的高度随着增加和减少而改变。我不明白为什么会这样。滚动条的波动就说明了这一点。

我附上了一个示例片段来说明我的问题。

.logo-circle img {
    -webkit-animation: spin1 100s infinite linear;
    -moz-animation: spin1 100s infinite linear;
    -o-animation: spin1 100s infinite linear;
    -ms-animation: spin1 100s infinite linear;
    animation: spin1 100s infinite linear;
    position: absolute;
    top: 3%;
    left: 27.5%;
    overflow: hidden;
}
 
@keyframes spin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<div class="logo-circle img-responsive">
   <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width = "45%"/>
</div>

Answer 1

图像没有调整大小，但是当它旋转时，由于 Angular 的缘故，它占用了更大的空间

你可以通过在 body 中添加 overflow:hidden 来解决这个问题

body {
  margin: 0;
  height: 100vh;
}

.logo-circle {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.logo-circle img {
  -webkit-animation: spin1 100s infinite linear;
  -moz-animation: spin1 100s infinite linear;
  -o-animation: spin1 100s infinite linear;
  -ms-animation: spin1 100s infinite linear;
  animation: spin1 100s infinite linear;
  position: absolute;
  top: 3%;
  left: 27.5%;
  max-height: 95%;
  width: auto;
}

@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="logo-circle img-responsive">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width="45%">
</div>