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>

我想从图像大小调整“脱离”动画，即仅在视口更改时调整图像大小。 MTIA

Answer 1

如果您需要自适应图像，那么您必须在固定比率调整大小的CSS上遵循此代码。如果需要，你可以设置宽度：90％。

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

以下是使用选框模拟的示例。具有90％的图像宽度。如果您有任何问题，请在评论中提出。

＆＃13;

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

＆＃13;

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

＆＃13;

图像调整大小不断重复

1 个答案: