javascript - 如何使javascript图像响应

Question

我有一个 javascript 横幅旋转脚本，我一辈子都想不出如何添加图像样式来使它们响应。例如，最大宽度:500px 和宽度 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 设置为 auto，以便图像保持在父图像的边界内。如果它是全宽，您需要将父容器的宽度设置为 550px(或其他)。您可以通过外部 CSS(可能更可取)或通过 inline CSS 来做到这一点使用 style 属性:

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

摆弄外部 CSS:http://jsfiddle.net/r40fn9hg/