Question

I’ve stumbled upon an interesting problem while playing with my website.

So I’ve got a containing column with a fixed width. In this I have a number (two for now, don’t know whether it’ll matter) of images in one row. The images’ size and aspect ratio are undetermined and not equal to each other. Now, I’m looking to resize them, so that their height is equal, and their combined width is equal to that of the parent container, while keeping their aspect ratio. And also resize the container height accordingly, for that matter.

Hope I made myself clear.

I’m sure it’s possible with JavaScript or similar, but I’m mainly interested in if there’s a solution using CSS.

Thanks

Answer 1

I think that’s impossible, and even if it were possible, it would be the darkest css hack i’ve ever seen (besides it would imply using not-very-compatible CSS). It’s way easier and recommendable doing that with Javascript. (EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/)

But, for fun I did this: http://jsfiddle.net/martinschaer/cGZrF/

It’s the closest you can do with CSS3 for what you need. There’s a small gap that fills empty vertical space, but all the images are resized with CSS to fit in the container.

.container{
    width: 600px;
    margin: 10px;
    background-color: #000;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

.imgwrapper {
    box-flex: 1;
}

img{
    max-width: 100%;
    height: auto;
    display:block;
}

See the jsfiddle (http://jsfiddle.net/martinschaer/cGZrF/) for the full code compatible with mozila and webkit.

EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/