How to make javascript images responsive

Question

I have a javascript banner rotation script that I can't for the life of me figure out how to add image styling to make them responsive. For example, max-width: 500px and width 100%.

It won't recognize those directives in the same way CSS does and just stretch across the whole page.

Does anyone know how I can do this?

Thank you!

  <center><script type="text/javascript"><!--

headers=
[
"<a href=\"http://example.com\"><img src=\"http://wvw.example.com/images/pictures/header-008.jpg\" width=\"\" height=\"\" alt=\"\" border=\"0\"></a>",
"<a href=\"http://example.com\"><img src=\"http://wvw.example.com/images/pictures/header-013.jpg\" width=\"\" height=\"\" alt=\"\" border=\"0\"></a>",
"<a href=\"http://example.com\"><img src=\"http://wvw.example.com/images/pictures/header-030.jpg\" width=\"\" height=\"\" alt=\"\" border=\"0\"></a>",
"<a href=\"http://example.com\"><img src=\"http://wvw.example.com/images/pictures/header-031.jpg\" width=\"\" height=\"\" alt=\"\" border=\"0\"></a>",

]
randomNumber = Math.random()
var show_headers = headers[Math.floor(randomNumber * headers.length)]
document.write(show_headers);
// --></script>
<noscript>
<a href=\"http://example.com\"><img src=\"http://wvw.example.com/images/pictures/header-013.jpg\" width=\"\" height=\"\" alt=\"Click Here\" border=\"0\"></a>
</noscript></center>
</br>

Answer 1

You want to set the image's max-width property to 100% and height to auto, so that the image stays within the bounds of the parent. If it's going the full width, you'll want to set the parent container to a width of 550px (or whatever). You can do that via external CSS (probably preferable), or via inline CSS using the style attribute:

<img style="max-width:100%;height:auto">

Fiddle with external CSS: http://jsfiddle.net/r40fn9hg/