CODEWITHSUNDEEP
imageresizethumbnails
tokyowp
tokyowp

Reputation: 423

How to proportionally size images to fit dimensions of 200px x 150px thumbnail in css?

I`ve tried a couple of things even using the CSS clip, but not getting it proportionally fit in the thumbnails here http://giantmango.com/arttest2-2510.

In CSS, what is the best way and how would I proportionally resize an image to display in dimensions of a 200px (width) x 150 (height) thumbnail?

Just checked firebug and for some reason all my img tags are always set to a height of 200 even though I have max-height set to 150...

Upvotes: 2

Views: 24491

Answers (2)

Obi-wan
Obi-wan

Reputation: 182

css:

#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}

html:

<div id="thumb"><img src="tb01.jpg"></div>

Upvotes: 0

Andrea
Andrea

Reputation: 20493

Use max-height and max-width. Beware that they are broken in older versions of IE. You can do

#myImage: {
    max-height: 150px;
    max-width: 200px;
}

EDIT: @tokiowp: try this. It should work (it surely does for me). So the problem with your layout comes from additional properties you may have set.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
    </body>
</html>

EDIT: it turns out, looking at your source, that you are actually declaring your images with something like

<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78"  width="200" height="200"/>

Of course what you need is to remove these declarations of width and height.

Upvotes: 2

Related Questions