如何使javascript图像响应

Question

我有一个JavaScript标语旋转脚本，我一生都无法弄清楚如何添加图像样式以使其具有响应能力。 例如，最大宽度：500像素，宽度100％。

它不会像CSS那样识别那些指令，而只会遍及整个页面。

有人知道我该怎么做吗？

谢谢！

  <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

您想将图像的max-width属性设置为100％，将height为自动，以使图像保持在父对象的边界之内。 如果要使用全宽度，则需要将父容器的宽度设置为550px（或其他宽度）。 您可以通过外部CSS（可能更可取）或使用style属性通过内联CSS来实现：

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

用外部CSS提琴： http : //jsfiddle.net/r40fn9hg/