图片高宽取值原理有关问题
日期：2014-05-16 浏览次数：20406 次
图片高宽取值原理问题？
分不多了，凑活下吧
一个图片实际200*200
Javascript:
var w=img.width;
var h=img.height;
var w2=img.offsetWidth;
var h2=img.offsetHeight;
w与w2 h与h2有什么区别？
如果这个200*200的图片被zoom{zoom:0.75}缩放
怎么通过JS属性取得实际的宽高和被缩放后的宽高？
------解决方案--------------------
先用hidden存好没有缩小的width,height
------解决方案--------------------
offset和img.width，看示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> - http://www.never-online.net </title>
<meta http-equiv= "ImageToolbar " content= "no " />
<meta name= "author " content= "never-online, BlueDestiny "/>
</head>
<body id= "www.never-online.net ">
<img src= "http://zi.csdn.net/ren760-ok_3.gif " id= "p " style= "border:2px solid #000 " onload= "loadp(this) "/>
<script type= "text/javascript ">
// <![CDATA[
function loadp(img) {
var w=img.width;
var h=img.height;
var w2=img.offsetWidth;
var h2=img.offsetHeight;
alert( "offset: "+w2)
alert( "img "+w)
}
//]]>
</script>
</body>
</html>
------解决方案--------------------
如果这个200*200的图片被zoom{zoom:0.75}缩放
用DOM取得此图片的zoom值(object.style.zoom)
再用img.width*zoom值即可
------解决方案--------------------
<img src= "..... " onload= "loadimg(this) "/>
<script type= "text/javascript ">
function loadimg(theimg) {
var image=new Image();
image.src=theimg.src;
//image.width> 0,image.height既为原图尺寸
alert(image.width);
alert(image.height);
}
</script>
------解决方案--------------------
<img src= "..... " onload= "loadimg(this) "/>
<script type= "text/javascript ">
function loadimg(theimg) {
var image=new Image();
image.src=theimg.src;
//image.width,image.height既为原图尺寸
alert(image.width);
alert(image.height);
}
</script>
分不多了，凑活下吧
一个图片实际200*200
Javascript:
var w=img.width;
var h=img.height;
var w2=img.offsetWidth;
var h2=img.offsetHeight;
w与w2 h与h2有什么区别？
如果这个200*200的图片被zoom{zoom:0.75}缩放
怎么通过JS属性取得实际的宽高和被缩放后的宽高？
------解决方案--------------------
先用hidden存好没有缩小的width,height
------解决方案--------------------
offset和img.width，看示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> - http://www.never-online.net </title>
<meta http-equiv= "ImageToolbar " content= "no " />
<meta name= "author " content= "never-online, BlueDestiny "/>
</head>
<body id= "www.never-online.net ">
<img src= "http://zi.csdn.net/ren760-ok_3.gif " id= "p " style= "border:2px solid #000 " onload= "loadp(this) "/>
<script type= "text/javascript ">
// <![CDATA[
function loadp(img) {
var w=img.width;
var h=img.height;
var w2=img.offsetWidth;
var h2=img.offsetHeight;
alert( "offset: "+w2)
alert( "img "+w)
}
//]]>
</script>
</body>
</html>
------解决方案--------------------
如果这个200*200的图片被zoom{zoom:0.75}缩放
用DOM取得此图片的zoom值(object.style.zoom)
再用img.width*zoom值即可
------解决方案--------------------
<img src= "..... " onload= "loadimg(this) "/>
<script type= "text/javascript ">
function loadimg(theimg) {
var image=new Image();
image.src=theimg.src;
//image.width> 0,image.height既为原图尺寸
alert(image.width);
alert(image.height);
}
</script>
------解决方案--------------------
<img src= "..... " onload= "loadimg(this) "/>
<script type= "text/javascript ">
function loadimg(theimg) {
var image=new Image();
image.src=theimg.src;
//image.width,image.height既为原图尺寸
alert(image.width);
alert(image.height);
}
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
