沒有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);