Javascript 根据屏幕宽度加载不同的图像

假设我调用的是一个像

<img src="http://server:8080/graphs/ChartGen?PID=982&minutes=480&height=30&width=1400" />

---

如果最后的宽度是“1400”，我如何将其改为“1400”，即用户屏幕宽度的60%。

您应该在JavaScript中设置参数。检查谷歌图书的来源

<script language="javascript" type="text/javascript">     

var url= "http://server:8080/graphs/ChartGen?PID=982&minutes=480&height=30&width=" + (screen.width * 0.60);     


</script> 

变量url=”http://server:8080/graphs/ChartGen?PID=982&minutes=480&height=30&width=“+（屏幕宽度*0.60）；

另一种方法是使用CSS而不是JS：

@media screen and (min-width: 800px) {
    #Chart {
        background-image: url(//server:8080/chart/982/480/:height:30/:width:480);
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    #Chart {
        background-image: url(//server:8080/chart/982/480/:height:30/:width:460);
    }
}
...

---

虽然图表往往是内容的一部分，但使用CSS和背景图像并不合适，在这种情况下，JS+

img.src

是更好的方法。

在我的例子中，我在noway提供的答案上添加了我的答案，因为我的实际图像字符串比他的答案复杂一些，因为它在jsp循环中

<%
    for (int i = 0; rs.next(); i++) {
%>

//Other formatting
<div class="ProgramGraph"> 
<script type="text/javascript"> document.write("<img src=\"http://server07:8080/graphs/ChartGen?PID=<%= rs.getInt("PID")%>&minutes=<%out.print(timeSelected * 60);%>&height=30&width=" +screen.width*.60 +"\" />");</script></div>

//其他格式
document.write（“&minutes=&height=30&width=“+screen.width*.60+”\“/>”）；

不知道我是否理解您的问题，但css可能会有所帮助：img{width:60%}不幸的是，图像源要求我向其传递一个值（最后的宽度=1400）因此，如果我在900px宽的显示器上运行代码，1400可能太大。不幸的是，此解决方案不起作用，因为PID/分钟也需要根据用户偏好进行更改。这些值通过循环加载。我相信您还可以使用另一个JS函数设置PID和分钟参数，该函数在单击事件时启动链接的数量？