title: Dynamic width and height of images
body: <p>I would like to have a image-group of three images. Every single image has to have the same, dynamic height and the image-group has to use 100% of the size of it's parent div (so margin-left of the first image is the same as margin-right of the last image)</p>
  
  <p>Basically what I need is a CSS or JS solution, which is fully dynamic.</p>
  
  <p>My goal: <a href="https://i.stack.imgur.com/9DZ90.jpg" rel="nofollow noreferrer">Width, height and if possible margin between images should be dynamic.</a></p>
  
  <p>What I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-group {
    margin-top: 10px;
    width: 100%;
  }
  
  .img {
   float: left;
   margin: 4%; /*Margin should, but doesn't have to be dynamic...*/
   height: 20%; /*Height has to be dynamic...*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="img-group"&gt;
      &lt;img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"&gt;
      &lt;img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"&gt;
      &lt;img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>