Give help. Get help.

  • # 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:29 pm

    This is as far as I could get :

    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;

    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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.