css images in a row responsive

Question

im displaying max. 3 images in a row, if you resize browser window they stack under each other.

Now for example, if you resize the window and only one image is shown, how can I set the images size to width:100%;?

I've seen this on https://www.slickwords.com/ for example.

My Code:

#wrapper {
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

div>div>div {
  display: inline-block;
}

div>div {
  text-align: center;
}

<div id="wrapper">
  <div style="max-width:900px;margin: 0 auto;">
    <div style="width:100%;">


      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>

    </div>
  </div>

</div>

Regards

Answer 1

What you're looking for are css media queries

With a statement as simple as this:

@media screen and (min-width: 992px) {
  body {
    background-color: blue;
  }
}

You can force the body to be blue (if the screen width is bigger than 992px).

Source: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 2

Instead of manually measuring the point where the images stack up using media queries, you can use flexbox 's flex-flow property and apply a min-width to each one of the children to set the "breaking point":

 //The JS code here is just for fiddling around and isn't relevant. let input = document.getElementById("setwidth"); input.onchange = e => { document.getElementById("container").style.width = e.target.value+"%"; document.getElementById("widthspan").textContent = e.target.value+"%"; }; 

 #container { display: flex; flex-flow: row wrap; /* This is where the magic happens!*/ align-items: flex-start; align-content: flex-start; justify-content: space-around; border: 2px solid black; } #container>div { flex-basis: 22.5%; /*Try to take up 22.5% of the space, which would be almost a quarter but with a spacing of 2.5% total*/ background: blue; border: 1px solid yellow; height: 100px; min-width: 80px;/* This is also where the magic happens */ } 

 <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- Just for fiddling around: --> <hr> Set container width: <span id="widthspan">100%</span> <input id="setwidth" type="range" min="1" max="100" value="100"/> 

---

Additional resources:

• CSS Tricks: A complete guide to Flexbox

Answer 3

As Tim Gerhard suggested above, you need to check media queries. You can also try the following.

1. Use Css to set the sizes of your image, the sizes you specify in the html file overrides css options, so media queries may not even work.
2. In the css, you can set the width of the images to 100% for the smaller displays and the actual sizes for bigger displays.

I think these should work.