How to get 4 images on one line and keep it responsive

Question

I need to have 4 images of equal height, but variable width on one line. When the viewport gets smaller, the images have to resize accordingly and stay on one line

So something like this :

<div class="4images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>  
</div>

What is the best CSS to use here ?

if I use

.4images  {
    width:100%;
    white-space: nowrap;
 }

 .4images img {
    display:inline-block;
 }

I do get the desired effect on a large screen, but when I get a smaller device, the last images go below the others... the idea is that they just would get smaller, stay in one row...

Please any hints how to accomplish this ?

score 5 · Answer 1 · answered Feb 25 '16 at 00:48

You can use flex but avoid image to be a flex child if you want the ratio preserved.

.flex {
  display:flex;
  }
.flex div {
  flex:1;
  margin:5px; /* need some space ?*/
  }
img {
  width:100%;
  }

<div class="flex">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>

you can also give a try to table model

.table {
  border-spacing:5px; /* need some space ?*/
  display:table;
  table-layout:fixed;
  width:100%;
  }
.table div {
  display:table-cell;
  }
img {
  width:100%;
  }

<div class="table">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>

I wanted to prevent the table model, but the 'flex' is perfect for the job. — Wilko van der Ploeg, Feb 25 '16 at 05:52
@WilkovanderPloeg flex or table doesn't semanticly change the markup. display:table; includes ie8 too, flex not and it is still buggy in IE11, what matters here only which browser do you want to support ; ( CSS only styles HTML nothing more or less ) — G-Cyrillus, Feb 25 '16 at 14:05

score 0 · Answer 2 · edited May 23 '17 at 12:07

The layout is simple and easy with CSS flexbox. This is all you need:

.images { display: flex; }

DEMO

When you establish a flex container (by applying display: flex or display: inline-flex to an element), several default rules go into effect. Two of these rules are flex-direction: row and flex-wrap: nowrap, which means child elements (aka, flex items) will align horizontally and not wrap.

Regarding your class value (4images), although starting with a digit is valid in HTML5 (learn more), you would need to escape the character for it to be recognized by the CSS engine. I simply removed the number for demo purposes.

user3528269 · Answer 3 · 2016-02-25T00:58:02.610

0

first:
~~classes are not allowed to start with a number. For more information look here~~
E: ok that was html4. Well shouldn't start with a digit since you have to escape it to work, like here.

second: you can do it like this
css:

.images  {
width:100%;
}

.images img {
max-width: 24%;
width: 24%;
}

note: test around a bit with the width, sometimes the browser is calculating it not right and so you have to go down by 1%

edited Feb 25 '16 at 00:58

answered Feb 25 '16 at 00:36

user3528269

368
3
15

Your *first* point is not correct. Your source (W3Schools) is provided outdated information. http://stackoverflow.com/a/31773673/3597276 – Michael Benjamin Feb 25 '16 at 00:38
also, if you replace the class "images" in my jsfiddle with "4images" it doesn't work.... – user3528269 Feb 25 '16 at 00:41
It's for ID's and classes (further in the answer). – Michael Benjamin Feb 25 '16 at 00:42
This works if the images have the same width, but in my case they have different widths, see the original question. – Wilko van der Ploeg Feb 25 '16 at 05:50

score 0 · Answer 4 · answered Feb 25 '16 at 00:42

0

To make the images responsive, change your class definition like so.

 .4images img {
    width: 100%;
    height: auto;
 }

answered Feb 25 '16 at 00:42

TeaCoder

1,562
10
12

1

yes... but this is not by far a response to the question... 4 responsive images in a row! – Wilko van der Ploeg Feb 25 '16 at 05:53

How to get 4 images on one line and keep it responsive

4 Answers4