So far, unable to prevent thumbnail image stretching
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.
So 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.
Thank you for your expert advice.
No comments:
Post a Comment