Question

Yes! I did searched for related issues as it seems to be an easy question! However the solutions given on other topics do not solve my issue!

Im using an area filled with divs (CSS3 Box). Multiple rows with multiple divs
Each div gets his own picture that needs to stretch to fit the width and height of the div! (no matter what resolution).

Currently only the width stretch works. Height stretching seems to stretch it over all rows.

Fiddle to show you guys http://jsfiddle.net/h2Ya8/32/

Any solutions?

Answer 1

I’m not sure if it’s what you’re looking for, but adding

.product {
    position:relative;

and

.product img{
    width:100%;
    height:100%;
    position:absolute;
    bottom:0; right:0;
}

seems to force the image to width/height of the container.

Check the demo.

Do you need to preserve the ratio?