Make a row of big images fit to flexbox

Question

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  flex: 1;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

I want to display for example 5 big-sized images in a row inside the flexbox. I want all the images width to fit the current screen and not wrap at the bottom. I tried different combinations of flex: 1, width: 100% of the img tag but none of it worked...

"in a row" contradicts " width to fit the current screen" - please be clearer about what you are trying to achieve. — Constantin Groß, Oct 15 '19 at 15:31
This explains why your images don't resize: https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout. Try wrapping them in a div and setting the width of the image to 100% — Pete, Oct 15 '19 at 15:40

score 1 · Answer 1 · answered Oct 15 '19 at 15:44

Taken from this answer about why images do not resize in a flexbox layout:

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot shrink below the size of its content.

This means that the image will not shrink unless it is given a width. To get around this, you can wrap your image in a div (which will shrink to fill the flex container) and then give the image a width of 100%

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  display: block;
  width: 100%;
}

<div class="d1">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
</div>

score 0 · Answer 2 · answered Oct 15 '19 at 15:41

You need to justify-content the container. You can then set a flex-basis to the images. I've used space-between here but any of the other values would work.

.d1 {
  display: flex;
  border: 5px solid black;
  justify-content: space-between;
}

img {
  flex: 0 0 20%;
  width: 20%;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

If you don't know the number of images you'll have then I'd suggest wrapping the image in a div as that will flex normally.

score 0 · Answer 3 · answered Oct 16 '19 at 07:16

As per your description provided in the question area, we thought that you need a container with full width and a horizontal scroll containing five full-width images.

.scroll-wrap { border: 5px solid lightblue; width: 100%; overflow: auto;}
.d1 {display: flex; width: 500%;}
.d1 img{width: 20%;}

<div class="scroll-wrap">
  <div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

Make a row of big images fit to flexbox

3 Answers3