使用图片

时间:2016-08-04 11:01:30

标签: html marquee

我有一个大帐篷 像这样

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

在普通浏览器上看起来很好,但在手机上横幅很大。

我试过

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

但是它在横轴上设置了屏幕边框(如-200 x),并且终点几乎位于屏幕中间。因大小而异

我想到了一个解决方案,我会创建不同大小的多个图像,如果屏幕在一定的大小范围内,它必须加载该特定图像,但我真的不想走向这个方向
(如果所有其他方法都失败了,我可能会这样做)

任何帮助或方向?

2 个答案:

答案 0 :(得分:0)

您的问题的解决方案似乎完全独立于选框对象 - 您只需要将img元素设置为调整其容器大小:

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

你可以通过媒体查询来解决这个问题,但是如果你想做的就是让图像保持在屏幕范围内,你真的没有理由这样做。

答案 1 :(得分:0)

这个答案是由thepio在评论中给出的,我只是按照链接创建了这个。为我工作希望这有帮助。

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