CODEWITHSUNDEEP
jqueryjquery-pluginsheight
Jim G.
Jim G.

Reputation: 15373

Do jQuery's height() and width() methods maintain an image's proportionality?

Google results and the jQuery documentation indicate that jQuery's height() and width() methods make no effort to maintain an element's proportionality.

Yet when I run my code, it appears as if proportionality is indeed maintained.

Can anyone set the record straight?

Here's my code:

index.html

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
    <script src="jquery.gallery.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
    $('img').gallery();
     });

   </script>
 </head>
 <body>
    <img src="img1.jpg" alt="" />
    <img src="img2.jpg" alt="" />
    <img src="img3.jpg" alt="" />
 </body>
 </html>

jquery.gallery.js

(function( $ ){

  $.fn.gallery = function() {  
    return this.each(function() {
        var e = $(this);
        e.height(128);
    });
  };
})( jQuery );

Upvotes: 2

Views: 128

Answers (2)

GolezTrol
GolezTrol

Reputation: 116140

If you set only the height of an image, the width is adjusted in proportion and vice versa. Proportionality is not maintained if you set both of them.

Upvotes: 2

Guffa
Guffa

Reputation: 700562

jQuery does indeed do nothing to maintain the proportions of the image. If you set only the width or only the height of an image, it will automatically maintain it's proportions.

Upvotes: 3

Related Questions