Databases
StackOverflow2013
Postsdbo
POResize and Center image with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResize and Center image with jQuery
    text
    copied!<p>Looks like I haven’t explained myself well. I do apologize for that.</p> <p>I have edited this question to make it more clear.</p> <hr> <h2>The scenario</h2> <p>We have a website that doesn’t host the images. What it does is a reference to an image in other server.</p> <hr> <h2>The plan</h2> <ul> <li>Resize images keeping proportions.</li> <li>Center resized images.</li> <li>Flexible so it can fit in several sizes.</li> </ul> <hr> <h2>The bug</h2> <p>My code works as intended, however there is a Bug that only happens sometimes.</p> <p>If you go to the search page of the website, and swap between page 1, 2, 3 and 4 a couple of times, you will notice that sometimes the images are good… other times they appear aligned left, and do not take up the full container area.</p> <hr> <h2>The links</h2> <p><a href="http://www.algarvehouses.com" rel="nofollow">The full website</a> (in beta)</p> <p><a href="http://www.algarvehouses.com/js/jthumb.js" rel="nofollow">The JavaScript File</a></p> <p><a href="http://joanpiedra.com/jquery/thumbs/" rel="nofollow">The jQuery plugin that helped me</a> (jThumb)</p> <hr> <h2>The plan (detailed version)</h2> <p>Let’s say that the image is 600x400 pixels (remember they are not hosted on this server), and with jQuery and CSS, I want to resize the image (keeping proportions) in to a container of 310x200 pixels. </p> <p>The other challenge is to center the image.</p> <p>All this has to be flexible because there are several different containers sizes in the website.</p> <hr> <h2>What I have done so far (you can find this in the link above)</h2> <p><strong>To resize the image I'm doing:</strong></p> <pre><code>var img = new Image(); img.src = $(this).attr("src"); var width = $(this).css('width'); var height = $(this).css('height'); var photoAspectRatio = img.width / img.height; var canvasAspectRatio = width.replace("px", "") / height.replace("px", ""); if (photoAspectRatio &lt; canvasAspectRatio) { $(this).css('width', width); $(this).css('height', 'auto'); var intHeight = height.replace("px", ""); //tirar o PX $(this).css('marginTop', (-Math.floor(intHeight / 2))); } else { $(this).css('width', 'auto'); $(this).css('height', height); } $(this).wrap('&lt;div class="thumb-img" style="width:' + width + ' ;height:' + height + ';"&gt;&lt;div class="thumb-inner"&gt;' + '&lt;/div&gt;&lt;/div&gt;'); </code></pre> <hr> <p><strong>To center the image I’m doing:</strong></p> <pre><code>jQuery(this).css('position','absolute'); jQuery(this).left( '-' + ( parseInt( $(this).width() ) / 2 ) + 'px' ); jQuery(this).top( '-' + ( parseInt( $(this).height() ) / 2 ) + 'px' ); jQuery(this).css('margin-left', '50%' ); jQuery(this).css('margin-top', '50%'); </code></pre> <hr>
 

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