Scale images proportionally in CSS with maximum width

Question

I am currently using max-width to scale images. However, they are not scaled proportionally. Is there any way to cause this? I am open to Javascript / jQuery.

If possible, is there a way to do this without knowing the original image size (maybe this can be determined using Javascript / jQuery)?

Answer 1

You need to specify the original width and height:

<img src="/whatever" width="100" height="200" alt="Whatever" /> 

And then use something like this in CSS:

 #content img { max-width: 100%; height: auto } 

You can try this with jQuery if you don't have a width and height in front, but your mileage may vary:

 $(function(){ $('#content img').load(function(){ var $img = $(this); $img.attr('width', $img.width()).attr('height', $img.height()); }); }); 

Obviously replace #content with any selector for which you want to embrace functionality.

Answer 2

Unlike the accepted answer, you can do this without specifying the size in HTML. All this can be done in CSS:

 #content img { max-width: 100px; width: 100%; height: auto; } 

Answer 3

when setting to use constant width:

 height: auto 

Answer 4

Here's how to do it without Javascript. Set max-width to the desired length.

 #content img { max-width: 620px; height: auto; } 

This worked for me tested on a Mac with Firefox 28, Chrome 34 and Safari 7, when I didn't have the width and height settings explicitly set in the img tags.

Do not set the width in CSS to 100% after the max-width parameter, as one person suggested, because then images that are narrower than the width of the container (for example, icons) will explode much more than we would like.

Answer 5

Using the width and maximum width on the image, twist IE8.

Put the width on the image and wrap it in a div with maximum width. (Then curse MS.)

Answer 6

I had to do this with the following requirements:

• The page should not return when loading images. Image sizes are known on the server side and calculations can be made.
• Images must scale proportionally
• Images should not be wider than the containing element
• Images cannot be scaled, only if necessary
• Must use the img element, not the background, to make sure the images also print correctly.
• No javascript!

The closest I came up with is a terrible fixture. This requires three elements and two inline styles, but as far as I know, this is the best way to scale images proportionally. All suggestions height: auto; here they deny the point of specifying the size of the image on the server side and cause a jump in content at boot.

 .image { position: relative; } .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <!-- container element with max-width prevents upscaling --> <div class="image" style="max-width: 640px;"> <!-- div with padding equal to the image aspect ratio to make the element the correct height --> <div style="padding-top: 75%;"></div> <!-- img scaled to completely fill container --> <img src="//placebear.com/640/480" /> </div> 

https://jsfiddle.net/Lqg1fgry/6/ - There is "Hello" here so you can see if the content will be after the image is downloaded.

Answer 7

I hope it’s not too late, but with this code page I managed to get proportional images in my gallery. it will take time to understand what is happening, but try and enjoy.

 <style> div_base { width: 200px; // whatever size you want as constrain unchangeable max-width: 95%; // this is connected to img and mus exist } div_base img { width: auto !important; // very important part just have it there! height: 95%; // and this one is linked to maxW above. } </style> 

Answer 8

 function resizeBackground() { var scale=0; var stageWidth=$(window).width(); var newWidth=$("#myPic").width(); var stageHeight=$(window).height(); var newHeight=$("#myPic").height(); if( $(window).width() > $(window).height() ) { scale = stageHeight/newHeight; scale = stageWidth/newWidth; } else { scale = stageWidth/newWidth; scale = stageHeight/newHeight; } newWidth = newWidth*scale; newHeight = newHeight*scale $("#myPic").width(newWidth); $("#myPic").height(newHeight); }