如何在不裁剪的情況下更改圖像的大小？

Question

我有一個圖片來源：

var _img = <img src="../images/yadayada.jpg"> 

而且我希望它放大或縮小它不裁剪，但之後我寧可不搶元素，更改CSS。

我想：

_img.height = 200; 

和

_img.style.height = 200 

但第一莊稼它，第二什麼都不做。

Answer 1

風格值需要單位，因此樣式設置會是這樣：

_img.style.height = "200px"; 

這將改變圖像的縮放大小。如果您只設置高度或寬度，則另一個應該縮放以保持縱橫比。您必須確保圖像所在的HTML佈局非常靈活，並且可以處理圖像大小的變化。

調整圖片大小演示：http://jsfiddle.net/jfriend00/K8GJQ/

Answer 2

更好的設置爲你的形象是這樣

<img id="myImg" src="../images/yadayada.jpg"> 

，並使用下面

var myImg = document.getElementById('myImg'); 
if(myImg && myImg.style) { 
    myImg.style.height = '200px'; 
} 

Answer 3

腳本一個id這一點很難說，如果你」重新嘗試更改現有圖片或爲您嘗試創建的新圖片設置尺寸...

聲明var _img = <img src="../images/yadayada.jpg">不會自己做任何事情，除非導致您的JS無法加載（它只是一個字符串，並且缺少周圍的引號和分號）。

如果您嘗試定位HTML中已有的圖像，請爲其<img>標籤指定一個您可以定位的唯一ID，然後設置寬度或高度。

在HTML：<img id="yadayadaImage">

在JS：

var myImage = document.getElementById('yadayadaImage'); 
myImage.style.width = "200px"; 

僅設置style.width OR style.height這裏應該保持不被裁剪的圖像，因爲其他尺寸應自動擴展。如果仍然裁剪，請檢查父元素的寬度&高度屬性，因爲這可能是限制尺寸的原因。

。

如果你真的想創建一個新的圖像瓦特/特定的來源和尺寸，你以上所述不會工作。您需要使用這些屬性創建一個新的<img>元素，然後將其附加到文檔中。

var targetDiv = document.getElementById("myPhotoDiv");  
var imgTag = document.createElement('img');    
imgTag.id = "yadayadaImage";       
imgTag.className = "uncroppedImage";    
imgTag.src = "../images/yadayada.jpeg"; 

//you COULD set height & width properties here, but that's what CSS is for. 
imgTag.style.width = "200px"; 

targetDiv.appendChild(imgTag); //add the new img to the page 

你說你不想做的最好的方法，但是，是使用CSS，並創建一個類，您可以重複使用其他圖像，你不一定知道具體的寬度或高度。

.uncroppedImage{ 
    width:100%; 
}