Grow your CSS skills. Land your dream job.

responsive images inside a div

  • # April 4, 2013 at 4:09 pm

    I have this markup:




    and this is the style for the images

    img {height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;}

    Images are displayed horizontally and fit in my width but when I resize the browser the images collapse.

    How can I keep the proportions and display them horizontally on resolutions smaller than let’s say 1280px without breaking the flow.

    What solution can work in my case ?
    Thanks !

    # April 4, 2013 at 6:24 pm

    Can you provide a link or codepen? I’m not quite understanding what you mean in context.

    Something I’ve done in the past is similar to this:

    http://codepen.io/anon/pen/FmGjp

    # April 4, 2013 at 6:29 pm

    This is as far as I could get : http://codepen.io/chrisburton/pen/mxIAB

    The problem is that when you resize the browser, it only takes effect when the windows hits the first image.

    # April 5, 2013 at 3:07 am

    @ChrisBurton @Dynamyc Not sure if this is what you are looking for but if you set the .girls img to height 25% and width 25% (as there are 4 images) then it seems to be fluid when the browser resizes.

    .girls img {
    display: inline-block;
    /*max-width: 100%;*/
    height: auto !important;
    height:25%;
    width:25%;
    }

    You could then set a max width in pixels or something for the .girls div.

    # April 5, 2013 at 3:10 am

    @TheTechBox Ah, thanks. Just so you’re aware, it’s actually @Dynamyc‘s issue.

    # April 5, 2013 at 3:12 am

    @ChrisBurton Shoot, sorry man. I replied the comment above that you made with your codepen link, thought it was your question.

    # April 5, 2013 at 3:18 am

    @TheTechBox Not a problem. Thanks again for helping.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".