Resizing a marquee with an image

Question

I have a marquee like this

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

It looks fine on normal browser but on the phone the banner is much to large.

I tried

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

but it sets the marquee starting point out side of the screen on the horizontal axis(like -200 x) and the end point almost in the middle of the screen. varies from size to size

I have thought of a solution where I would create multiple images with different sizes and if the screen is in a certain range of size it must load that specific image but I really don't want to go this direction
(if all else fails I will probably have to)

any help or direction?

Answer 1

This answer was given by thepio in the comments i just followed the link and created this. worked for me hope this helps.

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

If someone wants to re-use this you will just have to tweak the 60% and the 40%