StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I don't think there is a fully dynamic solution in pure css (though I would love to be proven wrong!)</p> <p>I wrote a quick jQuery solution here: <a href="http://jsfiddle.net/d2gSK/2/" rel="nofollow">http://jsfiddle.net/d2gSK/2/</a> You can play with the image sizes, the window size, and the width of the gutter, and your height should stay the same for both images, while the width is set to proportion.</p> <p>The javascript looks like this:</p> <pre><code> // put it in a function so you can easily reuse it elsewhere function fitImages(img1, img2, gutter) { // turn your images into jQuery objects (so we can use .width() ) var $img1 = $(img1); var $img2 = $(img2); // calculate the aspect ratio to maintain proportions var ratio1 = $img1.width() / $img1.height(); var ratio2 = $img2.width() / $img2.height(); // get the target width of the two images combined, taking the gutter into account var targetWidth = $img1.parent().width() - gutter; // calculate the new width of each image var width1 = targetWidth / (ratio1+ratio2) * ratio1; var width2 = targetWidth / (ratio1+ratio2) * ratio2; // set width, and height in proportion $img1.width(width1); $img1.height(width1 / ratio1); $img2.width(width2); $img2.height(width2 / ratio2); // add the gutter $img1.css('paddingRight', gutter + 'px'); } //when the DOM is ready $(document).ready(function() { // cache the image container var $wrapper = $('.portrait-wrapper'); // set the image sizes on load fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20); // recalculate the image sizes on resize of the window $(window).resize(function() { fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20); }); }); </code></pre> <p>I put the explanation inside the code. Feel free to ask if you want me to explain further.</p> <p>Note that i put a wrapper around your images, and gave the images a <code>display: block</code> and a <code>float:left</code>, which is required to make this work!</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