0 Replies - 721 Views - Last Post: 17 August 2013 - 08:18 AM

#1 ericjt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 17-August 13

So far unable to prevent image stretching

Posted 17 August 2013 - 08:18 AM

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 this web site

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.

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.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1