Responsive, multi-image banner with flex box?

[boylett]

Hi all,

I’m currently building a site and am a bit stumped with an aspect of the design. The header features an image banner.

Simple, right? But I’m not sure how to make it work. The user wants to upload three images that may or may not be the same size to the backend of the site.

The banner images need to all fit the width of the page while maintaining their own height and aspect ratio.
Javascript is not an acceptable solution here, sadly.

Here’s my pen so far:
http://codepen.io/boylett/pen/NRBwgO

[I.m.learning]

I’m a bit confused, do you want the images to stack horizontally as you have it, or lay in a row?

I do not use flex, nor SASS/SCSS…

A few things I am curious about is:
1. you stated flexbox, bot not utilizing it
2. you are using “img” but is not utilizing it (and you forgot the dot)
3. is the SCSS code correct; is it correct to use

...
    .banner
    {
        display: block;
        background: red;
        font-size: 0;

        .image
        {
            display: inline-block;
            height: 20em;
            font-size: 10px;
   img
            {
                display: block;
                width: 100%;
                height: auto;
            }}}

and not

    .banner
    {
        display: block;
        background: red;
        font-size: 0;
}

        .image
        {
            display: inline-block;
            height: 20em;
            font-size: 10px;
}
   img
            {
                display: block;
                width: 100%;
                height: auto;
            }

[Paulie_D]

The banner images need to all fit the width of the page while maintaining their own height and aspect ratio.

This really doesn’t make much sense…

Do you want to size these images or not?

Flexbox can make your div wrappers all the same height (which would be the height of the tallest by default) but that doesn’t help you because of the requirement above.

At some point, something will have to be resized….its up to you to decide what and when.

At best you can set the height of the images to 100% and the width to auto. At least then they’ll all line up neatly. Is that what you had in mind?

http://codepen.io/Paulie-D/pen/KgBZyk

[Author]

Posts