CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Wanting to learn
Wanting to learn

Reputation: 468

Get current image size

How can I get the current image size when I'm using css to scale the image?
I'm trying to get the instantaneous image size has the window is re-sized which changes the size of the image.

I'm thinking it's some kind of jQuery .height() .width()

JSFIDDLE

The CSS

#full_image{
  margin:0;
  padding:0;
  list-style:none;
  white-space: nowrap;
  overflow:hidden;
  position:relative;
  display:inline-block;
}

#full_image ul li img{
  margin:0 auto;
  width:100%;
  max-width:100%
}

#full_image .full_close{
 background-color: red;
 top: 10px;     
 cursor: pointer;    
 height: 29px;
 opacity: 1;
 position: absolute;    
 width: 29px;
 z-index: 999;
 right: 10px;
}

#full_image .next_big{
 background-color: red;
  top: 50%;     
  cursor: pointer;    
  height: 29px;
  opacity: 1;
  position: absolute;    
  width: 29px;
  z-index: 999;
  right: 0px;
}

#full_image .prev_big{
   background-color: red;
   top: 50%;     
   cursor: pointer;    
   height: 29px;
   opacity: 1;
   position: absolute;    
   width: 29px;
   z-index: 999;
   left: 0px;
   color: #222;
    }

The HTML

<div id="full_image"> 
  <ul><li><a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a></li> </ul>    
    <a href="#" class="full_close"></a>
    <a href="#" class="button next_big"></a>
    <a href="#" class="button prev_big"></a>           
 </div>

Upvotes: 1

Views: 833

Answers (4)

Brad
Brad

Reputation: 6342

Yep. That's the way i'd go. Something like this: 

$(document).ready(function(){
    $(window).resize(function(){
        console.log($(this).height()); 
        console.log($(this).width()); 
    })

})

updated fiddle below

http://jsfiddle.net/mEMNq/2

Upvotes: 2

Rahul Tripathi
Rahul Tripathi

Reputation: 172628

Try this:-

(function($) {
    alert($('img').height());
    alert($('img').width());
})(jQuery);

JSFIDDLE

Also you can try using the element.clientWidth and element.clientHeight

Upvotes: 0

Max Malyk
Max Malyk

Reputation: 860

You could try using either non-standard IE element.currentStyle property or DOM Level 2 standard getComputedStyle method.

here you go - http://jsfiddle.net/maximua/mEMNq/4/

Upvotes: 0

user2672373
user2672373

Reputation:

This should get the job done:

(function($) {
    alert($('img').height());
    alert($('img').width());
})(jQuery);

Just alerting the height and width of the image. You may do the necessary manipulations.

Upvotes: 0

Related Questions