旋转改变图像的高度

Question

我有无限旋转图像360度的代码。所有的东西看起来都很好但是图像的旋转导致图像调整大小，即页面的高度随着增加和减少而变化。我不知道为什么会这样。滚动条的波动显示出来。

我附上了一个说明我问题的示例代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

图像没有调整大小，但是当它旋转时，由于角落

，它需要更大的空间

您可以通过将overflow:hidden添加到正文

来解决此问题

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许是关于Bootstrap的img-responsive课程？ ......它的使用＆＃34; max-width and height:auto;＆＃34;因此，如果您的图像不是正方形，则可以调整其大小。