使用图像调整选取框的大小

Question

我有一个字幕像这样

<marquee scrollamount="10" direction="right" behavior="alternate">
<img src="img/Banner.png"/>
</marquee>

在普通浏览器上看起来不错，但在 phone 上横幅太大了。

我试过了

<img src="img/Banner.png" style="width:30%"/>

但它在水平轴上将选取框起点设置在屏幕外侧（如 -200 x），终点几乎在屏幕中间。因尺寸而异

我想到了一个解决方案，我会创建多个不同尺寸的图像，如果屏幕在一定尺寸范围内，它必须加载该特定图像，但我真的不想朝这个方向发展
（如果一切都失败了，我可能不得不）

有什么帮助或指导吗？

Answer 1

您的问题的解决方案似乎完全独立于选取框对象 - 您只需设置 img 元素的样式以适应其所在的容器大小：

img {
  height: auto;
  max-width: 100%;
}

您可以使用媒体查询来解决这个问题，但如果您只想让图像保持在屏幕范围内，那么就没有理由这样做。

Answer 2

这个答案是由 thepio 在评论中给出的，我刚刚跟随 link 并创建了这个。为我工作希望这有帮助。

<style> 
  @keyframes movediv {
    0% { margin-left: 0%; }
    50% { margin-left: 60%; }
    100% { margin-left: 0%; }
  }
</style>

<img src="img/Banner.png" style="height: auto;animation:movediv 8s linear infinite;
max-width: 40%/>

如果有人想重复使用它，您只需调整 60% 和 40%

使用图像调整选取框的大小

Resizing a marquee with an image

html

marquee