Horizontal Images

maintain image aspect ratio

HTML

<div id="container">
    <h1>Vertically obedient image<br />with horizontally obedient text</h1>
    <h2>by <a href="https://twitter.com/#!/whiskeysteve" target="_blank">@whiskeysteve</a> using a method by <a href="https://github.com/Mottie" target="_blank">Mottie</a></h2>
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/34/Florida_Box_Turtle_Digon3.jpg" alt="" id="turtle" />
    <p>Go ahead: Resize your browser vertically. Thanks to jQuery, the above image maintains its aspect ratio AND all text in this container respects its boundaries.</p>
    <p>Much thanks to Mottie: I was able to modify <a href="http://jsfiddle.net/Mottie/5TETn/8/" target="_blank">his very savvy image slider</a> to achieve what I haven't been able to with CSS alone.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem lacus, ultrices non ultricies non, pretium sed velit. Sed sodales hendrerit turpis, sit amet tempus massa viverra et. Donec mauris neque, aliquet eget consequat at, tristique eget tortor. Mauris facilisis, tortor et consectetur laoreet, mauris nulla adipiscing purus, eget feugiat eros diam eget ante. Nulla porttitor, urna eu eleifend placerat, ligula erat ultrices dolor, id luctus urna tortor a orci. Nunc feugiat molestie nulla quis ullamcorper. Donec luctus dictum sodales. Morbi a enim nunc. Aenean sit amet erat a erat mollis molestie. Fusce aliquam auctor quam, vitae vulputate risus vehicula vitae. Quisque eget justo est. Vivamus sed felis ut ante rhoncus fermentum.</p>
    
</div><!--container-->

CSS

html, body {
    height: 100%;
    background-color: #ddd;
}

#container {
    /* width = dynamically determined based on image */
    border:1px #000 dashed;
    background-color: #fff;
    height: 90%;
    overflow: hidden;
    padding-right: 5%;
}
#container:hover {
    overflow-y: scroll;
}

#container h1 {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
}

#container h2 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

#container p {
    text-indent: 12px;
}

#container img {
    float: left;
}

JavaScript

var ratios, adjustSize = function() {
    var containerW = 0,
        win = $(window),
        winW = win.width(),
        winH = win.height(),
        imgProportion = .5 // Size of image in window, where 1 = 100%;
        
        $('img#turtle').each(function(i) {
            var w = winH * ratios[i];
            $('img#turtle').css({
                height: winH * imgProportion,
                width: w * imgProportion
            });
            // #container size becomes turtle size
            containerW = w * imgProportion;
        });

    $('#container').width(containerW);
};

// run script after all the images have loaded & on window resize
$(window).load(function() {
    // save all image ratios, after the images have all loaded
    ratios = $('img#turtle').map(function() {
        return $('img#turtle').width() / $('img#turtle').height();
    });
    adjustSize();
})

.resize(function() {
    adjustSize();
});