Databases
StackOverflow2013
Postsdbo
POImages in the Facebook Like Box are squashed and distorted - how can I prevent this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImages in the Facebook Like Box are squashed and distorted - how can I prevent this?
    text
    copied!<p>Like many others here I cannot find a way to prevent regular landscape images being distorted in the Like Box. I see that some have reverse engineered the algorithm for resizing images and found that it favours portrait orientation over landscape.</p> <p>The distortion spoils an otherwise great widget and I am wondering if there is any chance that this can be dealt with as a matter of priority. The question seems to be, why is the image not simply resized proportionally until it meets the maximum width/height restrictions?</p> <p>Instead the width and height appear to be adjusted with no regard whatsoevever for the original proportions of the image. Strange indeed!</p> <p>I would have posted examples but it appears that, as a new user, I am not allowed to do that!</p> <p>Since posting the above which was based on my findings using IE9, I have tested my page in Firefox and Safari. Both these browsers display the Like Box images differently in that they are much more proportionally resized. Unfortunately it is still not perfect as they now stretch off the right hand side of the box. Here are the scaling proportions in Firefox (my widget is 300px wide).</p> <p>Image 1 320px × 239px (scaled to 300px × 223px)</p> <p>Image 2 320px × 218px (scaled to 300px × 204px)</p> <p>From this it would appear that the scaling is proportional and in line with the box width. However this does not work due to the 100px or so margin down the left hand side. In Safari the left hand margin is far less and so still more of the picture is visible. Why would the scaling be completely different in IE and even the rendering different across these browsers?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload