[英]How to make javascript images responsive
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. 我有一个JavaScript标语旋转脚本,我一生都无法弄清楚如何添加图像样式以使其具有响应能力。 For example, max-width: 500px and width 100%.
例如,最大宽度:500像素,宽度100%。
It won't recognize those directives in the same way CSS does and just stretch across the whole page. 它不会像CSS那样识别那些指令,而只会遍及整个页面。
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>
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. 您想将图像的
max-width
属性设置为100%,将height
为自动,以使图像保持在父对象的边界之内。 If it's going the full width, you'll want to set the parent container to a width of 550px (or whatever). 如果要使用全宽度,则需要将父容器的宽度设置为550px(或其他宽度)。 You can do that via external CSS (probably preferable), or via inline CSS using the
style
attribute: 您可以通过外部CSS(可能更可取)或使用
style
属性通过内联CSS来实现:
<img style="max-width:100%;height:auto">
Fiddle with external CSS: http://jsfiddle.net/r40fn9hg/ 用外部CSS提琴: http : //jsfiddle.net/r40fn9hg/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.