title: css images in a row responsive
body: <p>im displaying max. 3 images in a row, if you resize browser window they stack under each other.</p>
  
  <p>Now for example, if you resize the window and only one image is shown, how can I set the images size to width:100%;?</p>
  
  <p>I've seen this on <a href="https://www.slickwords.com/" rel="nofollow noreferrer">https://www.slickwords.com/</a> for example.</p>
  
  <p>My Code:</p>
  
  <pre><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&gt;div&gt;div {
    display: inline-block;
  }
  
  div&gt;div {
    text-align: center;
  }
  
  &lt;div id="wrapper"&gt;
    &lt;div style="max-width:900px;margin: 0 auto;"&gt;
      &lt;div style="width:100%;"&gt;
  
  
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
        &lt;div&gt;&lt;img src="img" width="250" height="150"&gt;&lt;br&gt;This text goes under the Picture.&lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Regards</p>