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 开发者_JAVA技巧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...
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.
css:
#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}
html:
<div id="thumb"><img src="tb01.jpg"></div>
加载中,请稍侯......
精彩评论