Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window?
You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/
I would like the image to be already scaled vertically when the browser loads.
Currently, the scaling only starts when the onBrowserResize event is triggered.
However, during resize, the image appears to be stretching and warping, and I need to maintain its proportions.
I believe JavaScript holds the solution, but my understanding of it is limited. Any assistance would be greatly appreciated.
Javascript Code:
$(window).resize(function(){
$('.slide img').css({
maxHeight: $('.slide').height() * 0.8,
maxWidth: $('.slide').width() * 0.8
});
});
CSS Code:
#slide {
text-align: center;
background-color: green;
height: 100%;
width: 100%;
display: inline-block;
}
.slide {
vertical-align: middle;
display: table-cell;
}
.slide:after {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle
}
.slide img {
vertical-align: middle;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
HTML Code:
<div id="slide" class="slide"><img src="image.jpg"></div>