没有PHP的图形背景图像调整大小

Question

我已经阅读了几个有用的答案。使用PHP和最大高度等图像大小调整。：Image resize script

但是，我的问题是，我想调整我从其他网站（USGS）检索到的图形的图像大小，并将其放入网站（zenfolio）支持HTML和JavaScript，但不支持PHP。我已经尝试调整指定的高度和宽度，但是不断调整页面上显示的图像大小，而不是图像本身（对不起，我无法发布图像，因为我是新用户）。

我刚刚发布他们如上PNG的证明问题，但图像如下产生：

<div id="riverlevels"> 
    <center> 
     <div id="MyWidget" style="background-image:url(http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&amp;site_no=12354500&amp;parm_cd=00065&amp;period=21);width:576px;Height:400px;"> 
      <br/> 
      <a href="http://montanariverphoto.com" style="line-height: 3em; font-family:times; font-size:12px; text-decoration:none; color:#000033" target="_blank">Montana River Photography </a></div> 
    </center> 
</div> 
     </div> 

此相同的图像可以使用这个JavaScript产生，但出于某种原因，不允许我每页显示的变量多于一个图（我想同时显示放电（00060），并计高（00065））：

<script type="text/javascript"> 
wStation = "12354500"; 
wDays = "21"; 
wType = "00065"; 
wWidth = "576px"; 
wHeight = "400px"; 
wFColor = "#000033"; 
wTitle = ""; 
document.write('<div id="gageheight"></div>'); 
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>'); 

，你可以告诉我，我必须使用我自己创建JavaScript文件的独立站点。目前这些图表位于不同迭代在： montanariverphoto.com/test clark fork gage height

我真诚道歉，如果我错过了一个明显的答案，这！我基本上是通过对另一个网站的小部件进行逆向工程来创建这个小部件，所以也许我的电话不正确。

Answer 1

它绝对必须是背景图片吗？缩放它们是可能的（使用background-size），但是这个属性没有得到很好的支持（基本上它在Internet Explorer中不起作用）。您的代码将几乎过去一样工作，如果你可以使用图像标签来代替：

<img src="http://waterdata.usgs.gov/nwisweb/graph?agency_cd=USGS&amp;site_no=12354500&amp;parm_cd=00065&amp;period=21" width="576" height="400" alt="..." /> 

您的其他问题，IDS必须在页面上独一无二的。在您的代码示例中，您正在创建一个ID为gageheight的div，并且此ID是硬编码到您的JavaScript文件http://batpigandme.com/js/showstring.js。由于您只能在页面上拥有一个具有此ID的元素，因此如果稍后重复该代码，则无法工作。你需要改变这个脚本，让你可以在ID传递作为一个变量，像这样：

wTitle = ""; 
wElement = "gageheight"; 
document.write('<div id="gageheight"></div>'); 
document.write('<scr'+'ipt type="text/JavaScript"src="http://batpigandme.com/js/showstring.js"></scr'+'ipt>'); 

，然后在你的JS：

var myElement = document.getElementById(wElement); 
var JavaScriptCode = document.createElement("script"); 
JavaScriptCode.setAttribute('type', 'text/javascript'); 
JavaScriptCode.setAttribute("src", 'http://batpigandme.com/js/data2.js'); 
myElement.appendChild(JavaScriptCode);