Obtain the actual rendering width, height, and original width and height of the image.

Source: Internet
Author: User

When writing a page, you often encounter the need to obtain the width and height of the image. However, we used to get the width and height of the image actually rendered, that is, the width and height of the image after you set it with CSS or JS, which is not the original size of the image. I suddenly encountered this problem today. I did not know how to do it for a moment. I checked the information and found myself. To sum up.

For example. The Code is as follows:

 

1. Get the width and height of the Image Rendering (implemented by JS or jquery ).

(1) Use js to obtain the actual width and height of the image rendering.

There are two methods:

One is: document. getelementsbytagname ("IMG") [0]. width // obtain the actual rendering width document. getelementsbytagname ("IMG") [0]. height // obtain the actual rendering height

Another type: document. getelementsbytagname ("IMG") [0]. offsetwidth // obtain the actual rendered width document. getelementsbytagname ("IMG") [0]. offsetheight // get the actual rendering height

 

(2) Use jquery to obtain the actual rendering width and height of the image.

$ ("IMG"). Width () // obtain the actual rendering width

$ ("IMG"). Height () // get the actual rendering height

  

However, after we reset the width and height of the image through CSS or JS, we cannot use the above method to obtain the original size of the image. what we get is the actual width and height of the image rendering, to achieve this goal, we need to use the following method.

2. Get the original size of the image, that is, whether you have set the width and height of the image with CSS or JS, the original size of the image is always obtained.

HTML5 provides the new attribute naturalwidth/naturalheight to directly obtain the original width and height of the image. These two attributes have been implemented in Firefox/Chrome/Safari/opera and ie9 +.

Document. getelementsbytagname ("IMG") [0]. naturalwidth document. getelementsbytagname ("IMG") [0]. naturalheight

This attribute is not supported by IE8 and earlier versions, so a compatibility processing is required.

HTML code:

 

 

JS Code:

<SCRIPT> // obtain the compatibility of the original image size. Window. onload = function () {function getnaturalsize (IMG ){
If (window. naturalwidth & window. naturalheight) {naturalwidth = IMG. naturalwidth;} else {// compatible with IE8 and earlier versions var image = new image (); image. src = IMG. SRC; var naturalwidth = image. width;} return naturalwidth;} var natural = document. getelementbyid ('img '); alert (getnaturalsize (natural);} </SCRIPT>

Note that for IE6/7/8, a new IMG is created, and only the SRC is set. In this case, the width and height of the image must be obtained after the image is fully loaded.

Obtain the actual rendering width, height, and original width and height of the image.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.