Question

我有一个javascript横幅旋转脚本，在我的生活中我无法弄清楚如何添加图像样式以使它们具有响应性。例如，max-width：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设置为自动，以便图像保持在父级的范围内。如果它是全宽度，您将要将父容器设置为550px（或其他）的宽度。你可以通过外部CSS（可能更好）或inline CSS使用style属性来做到这一点：

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

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

如何使javascript图像响应

1 个答案: