I had a problem with one of my current projects where I was supposed to have an image enclosed in a div with fixed dimensions.
<div id="resize-div"> <img src="someimage.jpg", :id="resize-div"> </div>
For the dimensions of the div, you can set it inline or use css file:
#resize-div {
width:466px;
height:133px;
}
Now since not all images will fit this aspect ratio you’ll encounter problems easily enough. With images smaller than the div, I had little problem letting the css to handle it so it’s situated perfectly center in the div. I didn’t include it here to shorten the codes i need to display :).
Judging from the code shown above, you’ll not that if you have larger images that exceeded the div’s set height and width (especially those width different aspect ratios), a pure css solution simply won’t work (or at least I couldn’t make it work…. :/) so I thought of using JQuery to work it out for me.
Here’s my script to autofit images in a div using JQuery.
$(function(){
var divElem = $("#resize-div");
var maxht = divElem.height();
var maxwdt = divElem.width();
var imgElem = $("#resize-image");
var ht = imgElem.height();
var wdt = imgElem.width();
if (ht < wdt){
if (wdt > maxwdt)
$("#resize-image").css({'height' : "auto", 'width' : maxwdt});
else
$("#resize-image").css({'height' : "auto", 'width' : wdt});
}
else if (ht > wdt){
if (ht > maxht)
$("#resize-image").css({'height' : maxht, 'width' : "auto"});
else
$("#resize-image").css({'height' : ht, 'width' : "auto"});
}
});
December 8, 2011 at 4:26 am
You must place that code in in an window.load ($. load() in jQuery) handler, so that you get reliable values for the image dimensions. They are not available until all referenced images are completely loaded.
April 16, 2012 at 7:18 am
It will be nice to see how the code is integrated i a real live page. A demo will go a long way. Thanks
March 13, 2013 at 5:59 pm
Very useful, thx for sharing