Responsive horizontal image layout in CSS

Question

I'm trying to insert some images into a blog post.

I want to insert some number of images (likely between 2 and 4), of varying aspect ratios, in a row which is the width of the total text area. This row of images will be inserted between two paragraphs of text.

I want all of the images to fit inside the width of the text area (which will change dynamically with the window size), and I want them all to be the same height (meaning of course that "landscape" images take up more horizontal space than "portrait" ones, etc).

The width of the text area will change dynamically depending on the window/screen size, so the total area for the images to occupy must also change accordingly.

In essence, I want the group of images to arrange themselves in a row with equal heights, and thereafter behave almost exactly as they would if that "row" was itself just one image.

However, the only way I've found to force the images to all be the same height is to declare some fixed height for them - but then if the text area then shrinks so that this height is too large, the images overflow.

My best attempt so far looks like this:

<div id="textArea">
    <div id="imageContainer" style="height:250px; width:100%; display:flex">
        <img src="..." style="height:100%" />
        <img src="..." style="height:100%" />
        ...
    </div>
</div>

This fiddle shows the above code working. It works exactly as I'd like until the window is made too small, forcing the images to overflow.

Any help with this would be greatly appreciated.

Answer 1

Well you could set the attribute overflow and set it to auto.

That means it should look like this:

<div id="textArea">
    <div id="imageContainer" overflow="auto" style="height:250px; width:100%; display:flex">
        <img src="..." style="height:100%" />
        <img src="..." style="height:100%" />
    </div>
</div>

This should places automaticly scroll bars.

Answer 2

Use This Code

  #page { height: auto; width: 100%; background-color:red; } #content { height: auto; width: 60%; background-color: yellow; } #imageContainer { width: 100%; height: auto; background-color:white; } #imageContainer img { height: 250px; } 

  <div id="page"> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue accumsan nulla ac varius. Fusce dapibus blandit nisl et ornare. Nulla vestibulum at ante in posuere. Nam maximus metus in sapien tempus, sed rutrum enim congue. Sed vehicula ligula elementum arcu rhoncus porta. Ut bibendum vel ante ut fringilla. Vestibulum eget malesuada tellus. Fusce vel tellus vitae justo feugiat sodales iaculis sed lectus. Mauris rhoncus leo a ex accumsan, dignissim feugiat lectus ornare. </p> <div id="imageContainer"> <img src="http://i.imgur.com/jdYZkWD.png" /> <img src="http://i.imgur.com/NChb4fE.png" /> </div> <p> Nullam sit amet volutpat tellus. Integer malesuada rutrum elit, a cursus augue mollis non. Ut in erat ultricies, interdum ipsum eget, rutrum velit. Aliquam sed tortor non odio cursus hendrerit. Praesent iaculis tortor lacus, nec imperdiet arcu pharetra eget. Morbi eu libero pretium, efficitur est a, rhoncus enim. Vestibulum in eros velit. Aenean molestie tellus quis mi fringilla posuere. Aliquam eu leo augue. Etiam et velit nisi. Quisque accumsan porttitor purus, nec condimentum urna mattis ac. Mauris venenatis pharetra maximus. Nunc hendrerit arcu vel orci varius, in sodales libero vulputate. Sed condimentum ipsum diam, ut faucibus magna congue ut. </p> </div> </div>