<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<script type="text/javascript">
function resizeImg(photo,pWidth,pHeight){
///画像自分のサイズ小を取得
var image = new Image();
image.src = photo.src;
if(image.width>0 && image.height>0){
//縦なりゆき
if(pHeight == null || pHeight == undefined || pHeight == ""){
//画像サイズ小:元サイズ生きで表示。天地左右センタリング
if(image.width <= pWidth){
photo.height = image.height;
photo.width = image.width;
}else{
photo.width = pWidth;
photo.height = (image.height*pWidth)/image.width;
}
}else{
if(image.width/image.height>= pWidth/pHeight){
if(image.width>pWidth){
photo.width=pWidth;
photo.height=(image.height*pWidth)/image.width;
}else{
photo.width=image.width;
photo.height=image.height;
}
} else{
if(image.height>pHeight){
photo.height=pHeight;
photo.width=(image.width*pHeight)/image.height;
}else{
photo.width=image.width;
photo.height=image.height;
}
}
}
photo.align = "center";
photo.style.verticalAlign = "middle";
}
photo.align = "center";
photo.style.verticalAlign = "middle";
document.getElementById("inline1").innerHTML="元Width:" + image.width;
document.getElementById("inline2").innerHTML="元Height:" + image.height;
document.getElementById("inline3").innerHTML="変更後Width:" + photo.width;
document.getElementById("inline4").innerHTML="変更後Height:" + photo.height;
document.getElementById("inline5").innerHTML="Width(%):" + image.width/photo.width;
document.getElementById("inline6").innerHTML="Height(%):" + image.height/photo.height;
}
function change(){
if(document.getElementById("kw").value != ""){
//alert(document.getElementById("kw").value);
document.getElementById("img").src=document.getElementById("kw").value;
resizeImg(document.getElementById("img"),document.getElementById("w").value,document.getElementById("h").value);
}
}
</script>
</head>
<body>
<img id="img" src="http://profile.csdn.net/un28700/picture/3.jpg" alt=""/>
<br/><br/>
Width: <input value="540" id="w" type="text" maxlength="100" size="50" name="wd" autocomplete="off"/><br/>
Height: <input value="405" id="h" type="text" maxlength="100" size="50" name="wd" autocomplete="off"/><br/>
画像URL:<input value="http://profile.csdn.net/un28700/picture/3.jpg" id="kw" type="text" maxlength="100" size="150" name="wd" autocomplete="off"/><input id="sb" οnclick="change();" value="change"/>
<div id="inline1"></div><div id="inline3"></div><div id="inline5"></div>
<br/>
<div id="inline2"></div><div id="inline4"></div><div id="inline6"></div>
</body>
</html>