CSS fluid layout and dynamic image scaling - css

Question

I have a question about dynamic scaling of images within a div container, I'm building a portfolio website which have 3 col's of project images all scalable in width but static in height (e.g. div container => Width 33.33334% : Height 250px).
I've puzzled around with different CSS ideas but the layout always breaks since the images differ in dimensions as well as the container.
I'm not that skilled in CSS nor JS and now I'm kind of stuck looking for some advice firstly where to look for an solution, perhaps some code ideas/snippets or even better examples/API's etc.
I've made an small example of where I am now, as you can see one of the images is smaller due to it's dimensions and the layout is broken.
jsfiddle example:
jsFiddle example
I'm sorry I can't be more precise on what this image scaling technique is called since I honestly don't know, which again gives me a headache googling it.
best regards
Mads

Answer 1

I could be confused as to what you're asking for, but if you just want the sizes of the infoBlocks to be consistent, you can use width: 33.33% instead of max-width: 33.33% and your images width: 100%; height: 100%;
Here's an updated jsFiddle; is that what you wanted?

Answer 2

Try this method for an easy grid. It scales the image to fit the .image-box but keeps the aspect ratio. Any part of the image that exceeds that .image-box is removed by overflow.
HTML:
<div class="image-box">
<div class="source">
<img alt="Img_0106" src="http://www.team-bhp.com/forum/attachments/shifting-gears/1033178d1356977973-official-non-auto-image-thread-_mg_0143.jpg">
</div>
</div>
<div class="image-box">
<div class="source">
<img alt="Img_0106" src="http://upload.wikimedia.org/wikipedia/commons/a/af/All_Gizah_Pyramids.jpg">
</div>
</div>
CSS
.image-box {
background: #000;
height: 170px;
width: 256px;
float: left;
}
.image-box .source {
overflow: hidden;
width: auto;
height: 100%;
}
.image-box .source img {
width: 100%;
}
http://jsfiddle.net/A2cc6/

Answer 3

Try setting only height or width not both, this will respect the ratio of the image. You can also play with min/max width/height.
Maybe what you are trying to achieve is
.myimg {
height: 250px;
width:100%;
}
This is the class of the image, not the div !
You can also add a max-width if you don't want it to go higher than a certain value.

Answer 4

i may have found a jQuery solution to this problem
check this jsFiddel
or check my online exampel here
What im doing here is, when the page is done loading i check all images against it .box container to determine which CSS styling it needs. and voila now images scales fluid accord to the container, next step would be to center the image within the div container.
if you guy have the opportunity to check if the code is properly written for cross-browsers that would be really great and other's may used it too :).
thanks for all your assistance.
happy :D
Mads
jQuery code:
$(window).load(function() {
plottingData();
resizeImage();
});
$(window).resize(function() {
plottingData();
resizeImage();
});
function plottingData(){
var image = $('.box img');
var divW = $(".box").width();
var divH = $(".box").height();
var imgW = image.width();
var imgH = image.height();
$('.outputText').html('DIV CONTAINER W: '+divW+ ' H: ' +divH +' :: imgW: '+imgW +' : imgH: ' +imgH) ;
}
function resizeImage(){
$("img").each(function(){
var maxWidth = $(".box").width();; // Max width for the image
var maxHeight = $(".box").height();; // Max height for the image
var maxratio=maxHeight/maxWidth;
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
var curentratio=height/width;
// Check if the current width is larger than the max
if(curentratio>maxratio)
{
ratio = maxWidth / width; // get ratio for scaling image
/*
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height *ratio); // Scale height based on ratio
*/
$(this).css("width", "100%");
$(this).css("height", "auto");
}
else
{
/*
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
*/
$(this).css("width", "auto");
$(this).css("height", "100%");
}
});
}