js图片处理

Question

本人需求:只限定宽度、不限定高度，高度随宽度等比例变,请问用js如何实现.

Answer 1

<img id="img" src="..." height="10" onclick="img.height=2*img.height">

Answer 2

使用Javascript来控制控制网页图片宽度的大小：
function set_img_size(obj, width) { 
if (!obj) return ; 
if (!width) {       
width = obj.clientWidth * 0.9; 
if (width &lt; 400) return; /*设置图片的限定宽度*/
} 
img_items = obj.getElementsByTagName("img") 
if (img_items)  { 
for (i=0; i&lt;img_items.length; i++) { 
var s_width = img_items[i].width; 
var s_height = img_items[i].height; 
if (s_width &gt; width) { 
img_items[i].style.width = width + "px"; 
if (s_height == img_items[i].height) { 
img_items[i].style.height = ((width / s_width) * img_items[i].height) + "px"; 
} 
img_items[i].onclick = function() {window.open(this.src)}; 
img_items[i].style.cursor = "pointer"; 
img_items[i].alt = "点击查看原始尺寸"; 
} 
} 
} 
}
function selfadaptation_size() { 
if (typeof(content_img_width) == 'undefined') 
set_img_size(document.getElementById("posts")); /*控制图片所在的元素ID号*/
else
set_img_size(document.getElementById("posts"), content_img_width); /*控制图片所在的元素ID号*/   
set_img_size(document.getElementById("custom")); /*控制图片所在的元素ID号*/
}
if (window.addEventListener) 
window.addEventListener("load", selfadaptation_size, false); 
else if (window.attachEvent)    
window.attachEvent("onload", selfadaptation_size); 
else   
window.onload = selfadaptation_size;

Answer 3

这个不需要用js来控制,在默认的情况下,你只定义了高度或只定义了宽度,那么他会按比率来得到另一长度的一个图片原始大小为 200 * 400如果你<img src=xx width=100 />  那么他就会把这图的height 定为 200
当然如果你要做到动态更改图片大小的话,也只需要用js更改图的宽就行,高度自然会随着宽度的变化而自动按比率变化