Databases
StackOverflow2013
Postsdbo
POjQuery Masonry stretching images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Masonry stretching images
    text
    copied!<p><strong>[NOTE: I currently do not have enough reputation to post images, so unfortunately they're posted as links]</strong></p> <p>Alrighty, so, I'm currently developing a Wordpress theme with a little help from the jQuery Masonry plugin. Depending on which page you're viewing, images in posts must be either 200px or 500px wide. Earlier on I ran into a problem where images wouldn't retain their aspect-ratio when their width was resized, a problem that I fixed with some simple CSS:</p> <pre><code>#post img { width:100%; height:100%; } </code></pre> <p>That seemed to do the trick just fine. Now, however, something really weird is happening to the images on the page, where they're being stretched disproportionately on page load (images stretch almost twice as far as the screenshot goes):</p> <p><a href="http://i.stack.imgur.com/5dAgU.jpg" rel="nofollow">http://i.stack.imgur.com/5dAgU.jpg</a></p> <p>Strangely enough, regardless of their initial height differences, all images stretch to the same length.</p> <p>When I refresh the page, images return to their correct aspect-ratio. This is what the page should look like:</p> <p><a href="http://i.stack.imgur.com/YK4Sl.jpg" rel="nofollow">http://i.stack.imgur.com/YK4Sl.jpg</a></p> <p>I've pinpointed the problem to the jQuery Masonry plugin. When I take it away, images render just fine. Further than that though I have absolutely no clue as to what is going on and how I can fix it.</p> <p>FYI: when I resize the page, the plugin shuffles bricks normally, but images stretch even further. Maybe it could mean something?</p> <p>I've searched everywhere for an answer in vain. Maybe you fine lads have a remote clue as to what could be the problem?</p> <p>Thanks in advance,</p> <p>Julian</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