html - 图像调整大小不断重复

Question

我正在尝试制作一个相当简单的网页，有一个横幅图片和一个简单的动画(跑马灯仿真)。我想要一个响应式图像在页面中。问题是每当动画循环迭代时，图像调整大小都会重复。

.marquee {
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 17s linear infinite;
  -webkit-animation: marquee 17s linear infinite;
  background-color: red;
}
    
.marquee:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
     
.fixed-ratio-resize{
  height:auto;
  max-width: 90%;
}

<img src="image.png" class="fixed-ratio-resize" alt="banner" />  

<p class="marquee">
   Do not use marquee tag for improve accessibility and readability.
</p>    

我想从图像大小调整中“脱离”动画，即仅在视口(viewport)更改时才调整图像大小。国际机场

Answer 1

如果您需要响应式图像，那么您必须在固定比例调整大小的 css 上遵循此代码。如果需要，您可以设置 width:90%。

.fixed-ratio-resize {
  height: auto;
  width: 100%;
  display: block;
  margin: 0 auto;
}

这是一个带有选取框仿真的示例。图像宽度的 90%。如果您有任何问题，请在评论中问我。

 @keyframes marquee {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
}

@-webkit-keyframes marquee {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
}
 .marquee {
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 17s linear infinite;
  -webkit-animation: marquee 17s linear infinite;
  background-color: red;
}

.marquee:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.fixed-ratio-resize {
  height: auto;
  width: 90%; /*YOU CAN USE 100% if you want */
  display: block;
  margin: 0 auto;
}

  

    <img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="fixed-ratio-resize" alt="banner ">
<p class="marquee">Do not use marquee tag for improve accessibility and readability.</p>