blocks|key|1176786|text|$this.css('height',+'auto');
var+height+=+$this.height();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1176787|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$this.css('height', 'auto');
var height = $this.height();
</code></pre>

blocks|key|1176945|text|在我看来，被接受的解决方案修改了对象的外观。有时候，jQuery有点太有帮助了，你必须告诉它让它给你让路。如果您想使用naturalWidth或naturalHeight，那么只需通过将jQuery对象转换为本机浏览器元素引用来使用已经存在的对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1176946|var+Height+=+document.getElementById($(this).attr("id")).naturalHeight;|code-block|syntax|javascript|1176947|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It looks to me like the accepted solution modifies the appearance of the object. Occasionally jQuery is a little too helpful and you have to tell it to get out of your way. If you want to use naturalWidth or naturalHeight then just use the one that already exists by converting the jQuery object into a native browser element reference. 

<pre><code>var Height = document.getElementById($(this).attr("id")).naturalHeight;
</code></pre>

blocks|key|1176888|text|获取图像尺寸的一种方法是使用javascript动态加载图像的副本并获取其尺寸：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1176889|//+preload+the+image
var+height,+width+=+'';
var+img+=+new+Image();
var+imgSrc+=+'/path/to/image.jpg';

$(img).load(function+()+{
++++alert('height:+'+%2B+img.height);
++++alert('width:+'+%2B+img.width);
++++//+garbage+collect+img
++++delete+img;
}).error(function+()+{
++++//+image+couldnt+be+loaded
++++alert('An+error+occurred+and+your+image+could+not+be+loaded.++Please+try+again.');
}).attr({+src:+imgSrc+});|code-block|syntax|javascript|1176890|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

One way to get the dimensions of an image is to dynamically load a copy of the image using javascript and obtain it's dimensions:

<pre><code>// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
 alert('height: ' + img.height);
 alert('width: ' + img.width);
 // garbage collect img
 delete img;
}).error(function () {
 // image couldnt be loaded
 alert('An error occurred and your image could not be loaded. Please try again.');
}).attr({ src: imgSrc });
</code></pre>

blocks|key|1392525|text|这是一个jQuery函数的例子，它可以在老的IE版本上工作，甚至可以处理大图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1392526|/*
+*+NaturalWith+calculation+function.+It+has+to+be+async,+because+sometimes(e.g.+for+IE)+it+needs+to+wait+for+already+cached+image+to+load.
+*+@param+onNaturalWidthDefined+callback(img)+to+be+notified+when+naturalWidth+is+determined.
+*/
jQuery.fn.calculateNaturalWidth+=+function(onNaturalWidthDefined)+{
++++var+img+=+this[0];
++++var+naturalWidth+=+img.naturalWidth;
++++if+(naturalWidth)+{
++++++++onNaturalWidthDefined(img);
++++}+else+{+//No+naturalWidth+attribute+in+IE<9+-+calculate+it+manually.
++++++++var+newImg+=+new+Image();
++++++++newImg.src+=+img.src;
++++++++//Wait+for+image+to+load
++++++++if+(newImg.complete)+{
++++++++++++img.naturalWidth+=+newImg.width;
++++++++++++onNaturalWidthDefined(img);
++++++++}+else+{
++++++++++++$(newImg).load(function()+{img.naturalWidth=newImg.width;+onNaturalWidthDefined(img)});
++++++++}
++++}
};|code-block|syntax|javascript|1392527|用法很简单：|1392528|$(img).calculateNaturalWidth(function(img)+{+alert(img.naturalWidth)});|1392529|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is an example of a jQuery function which works on older IE versions even for large images.

<pre><code>/*
 * NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load.
 * @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined.
 */
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) {
 var img = this[0];
 var naturalWidth = img.naturalWidth;
 if (naturalWidth) {
 onNaturalWidthDefined(img);
 } else { //No naturalWidth attribute in IE&lt;9 - calculate it manually.
 var newImg = new Image();
 newImg.src = img.src;
 //Wait for image to load
 if (newImg.complete) {
 img.naturalWidth = newImg.width;
 onNaturalWidthDefined(img);
 } else {
 $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)});
 }
 }
};
</code></pre>

Usage is simple: 

<pre><code>$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)});
</code></pre>

blocks|key|1392343|text|最好的做法是在不设置宽度和高度的情况下隐藏图像，并将此图像的图像源用作原始图像。然后计算这个隐藏图像的尺寸。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1392344|或者，您可以在服务器端计算物理尺寸，并将其传递给页面中的隐藏元素，然后从该隐藏元素值中获取大小。|1392345|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The best you can do is to hide an image without setting the width and height and use the image source for this image as your original image. Then calculate the dimension of this hidden image.

Or else you can calculate the physical dimension in server side and pass that to a hidden element in the page and fetch the size from that hidden element value.

blocks|key|1176966|text|只会试着|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1176967|var+width+=+$("img",+this).css('width',+'auto').width();
var+height=+$("img",+this).css('height',+'auto').height();|code-block|syntax|javascript|1176968|基本上就是对naturalWidth和naturalHeight的计算|offset|length|style|CODE|1176969|entityMap^0|0|0|6|C|J|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Would just try

<pre><code>var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();
</code></pre>

Is basically the calculation for <code>naturalWidth</code> and <code>naturalHeight</code> anyway

blocks|key|1392579|text|来源：HERE|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1392580|下面是一个简短的jQuery+(任意版本)插件，它添加了两个方法:+naturalWidth()和naturalHeight()。它使用分支来确定浏览器是否支持naturalWidth和naturalHeight。如果支持，该方法将成为naturalWidth或naturalHeight属性的getter。如果不支持，该方法将创建一个新的未设置样式的图像元素，并返回该元素的实际宽度和高度。|1392581|++//+adds+.naturalWidth()+and+.naturalHeight()+methods+to+jQuery
++//+for+retreaving+a+normalized+naturalWidth+and+naturalHeight.
++(function($){
++++var
++++props+=+['Width',+'Height'],
++++prop;

++++while+(prop+=+props.pop())+{
++++(function+(natural,+prop)+{
++++++$.fn[natural]+=+(natural+in+new+Image())+?+
++++++function+()+{
++++++return+this[0][natural];
++++++}+:+
++++++function+()+{
++++++var+
++++++node+=+this[0],
++++++img,
++++++value;

++++++if+(node.tagName.toLowerCase()+===+'img')+{
++++++++img+=+new+Image();
++++++++img.src+=+node.src,
++++++++value+=+img[prop];
++++++}
++++++return+value;
++++++};
++++}('natural'+%2B+prop,+prop.toLowerCase()));
++++}
++}(jQuery));

++//+Example+usage:
++var+
++nWidth+=+$('img#example').naturalWidth(),
++nHeight+=+$('img#example').naturalHeight();|code-block|syntax|javascript|1392582|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/^0|3|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Source From <a href="http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/" rel="nofollow">HERE</a>

Here is a short jQuery (any version) plugin that adds two methods: naturalWidth() and naturalHeight(). It uses branching to determine if naturalWidth and naturalHeight are supported by the browser. If supported, the method just becomes a getter for the naturalWidth or naturalHeight property. If not supported, the method creates a new unstyled image element and returns that element's actual width and height.

<pre><code> // adds .naturalWidth() and .naturalHeight() methods to jQuery
 // for retreaving a normalized naturalWidth and naturalHeight.
 (function($){
 var
 props = ['Width', 'Height'],
 prop;

 while (prop = props.pop()) {
 (function (natural, prop) {
 $.fn[natural] = (natural in new Image()) ? 
 function () {
 return this[0][natural];
 } : 
 function () {
 var 
 node = this[0],
 img,
 value;

 if (node.tagName.toLowerCase() === 'img') {
 img = new Image();
 img.src = node.src,
 value = img[prop];
 }
 return value;
 };
 }('natural' + prop, prop.toLowerCase()));
 }
 }(jQuery));

 // Example usage:
 var 
 nWidth = $('img#example').naturalWidth(),
 nHeight = $('img#example').naturalHeight();
</code></pre>

I tried with something like this:

<pre><code>var Height = $(this).naturalHeight;
</code></pre>

But it doesn't work. Is there any way to do that

greez

Is there any way to read out the "naturalWidth" of an image with jquery?

服务器

jQuery

我尝试过这样的东西：var Height = $(this).naturalHeight;但它不起作用。有没有办法做到这一点？格雷兹

问有没有办法用jquery读出图像的"naturalWidth“？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法用jquery读出图像的"naturalWidth“？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法用jquery读出图像的"naturalWidth“？
EN