responsive images inside a div

[dynamyc]

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 !

[chrisburton]

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.

[TheTechBox]

@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.

[chrisburton]

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

[TheTechBox]

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

[chrisburton]

@TheTechBox Not a problem. Thanks again for helping.

[Author]

Posts