How to prevent thumbnail image stretching?

Question

I've tried several ways to keep images from stretching in this plugin.

.wpbdmthumbs img {
 max-height: 150px;
 max-width: 150px;
}

.wpbdmthumbs {
 height: 150px;
 width: 150px;
}

and this

.wpbdmthumbs img {
 max-height:400px;
 height: exp<b></b>ression(this.width > 400 ? 400: true);
 max-width:400px;
 width: exp<b></b>ression(this.width > 400 ? 400: true);
}

I have also tried this javascript (idk js, so may be wrong, got it from another forum)

<script type="text/javascript">
function load(path)
{
temp=new Image();
temp.onload=function(){
var w=temp.width;
var h=temp.height;
var cnt=document.getElementById("wpbdmthumbs");
var fitto=(w>h)?w:h;
var ratio=150/fitto;
temp.width *=ratio;
temp.height *=ratio;
wpbdmthumbs.appendChild(temp)
}
temp.src=path;
}
</script>

The thumbs are placed in a directory listing excerpt page by a Wordpress plugin called Business Directory. There is a setting that sets the main image for the listing to whatever size I want (300px is what I set), but then as the same image is used as the thumbnail in the excerpt and displays at the same size, which is too large for the excerpt page. So I have css to limit the thumb size in the excerpt to 150x150. The image is not distorted in the full listing but in the excerpt thumb it is distorted.

You can see it at http://www.nextinthewest.com

It stretches images wider to fill the 150 px width if it's taller than wide, and if it is wider than tall, it squishes in narrower but doesn't stretch it tall enough to fill the 150px height.

I may also be using the wrong selector, but I've tried several.

Maybe the plugin is telling the browser is 300px tall and wide and maybe any css is unable to work within that to prevent stretching.

Answer 1

In CSS if you want to over ride the CSS that is being generated by a plugin the the very rare correct use of !important is required. The benefit of correct use of !important is to over ride javascript generated CSS when directly editing the plugin is not possibile.

.wpbdmthumbs img {
 height: auto !important;
 width: auto !important;
 max-height: 150px !important;
 max-width: 150px !important;
}

.wpbdmthumbs {
 height: 150px !important;
 width: 150px !important;
}