Question

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

但是，我的问题是我要调整我从其他站点（USGS）检索的图形图像，并放入支持HTML和JavaScript但不支持PHP的站点（zenfolio）。我已经尝试调整指定的高度和宽度，但最后只调整页面上显示的图像数量，而不是图像本身（抱歉我不能发布图像，因为我是新用户）。

我刚刚将它们发布为上面的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="..." />

对于您的其他问题，ID需要在页面上是唯一的。在您的代码示例中，您创建了一个ID为gageheight的div，这个ID被硬编码到http://batpigandme.com/js/showstring.js的javascript文件中。由于您在页面上只能有一个带有此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);

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

1 个答案: