title: Image containers initially appear collapsed, than images appear one by one
body: <p>It's an know issue that "with fluidly sized images, before the images load, the image containers initially appear collapsed."</p>
  
  <p>I've fixed the issue for banner image and product images adding div and using this css hack:</p>
  
  <pre><code>height: 0;
  overflow: hidden;
  padding-bottom: 66.6%;
  position: relative;
  </code></pre>
  
  <p>But can't understand how to fix it for awards icons block.</p>
  
  <p>Firstly image containers initially appear collapsed, than it's loading one big icon, than 2nd, than resize them - would like it to know correct sizes before hand so it will look smooth to the eye.</p>
  
  <p>Here is the <a href="https://puu.sh/xLjc1/4091fe5481.mp4" rel="nofollow noreferrer">screen recording</a> of the issue</p>
  
  <p>Here is pen for award icons block > <a href="https://codepen.io/anon/pen/borJXK" rel="nofollow noreferrer">https://codepen.io/anon/pen/borJXK</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="awards-memberships-container" data-modal="#awards-memberships-modal"&gt;
      &lt;div class="awards-memberships"&gt;
          &lt;div class="item"&gt;
              &lt;img src="http://via.placeholder.com/188x132"/&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="http://via.placeholder.com/146x146"/&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="http://via.placeholder.com/204x133"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>img{vertical-align:bottom;}
  body section img{max-width:100%;height:auto;}
  .awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
  .awards-memberships{display:flex;padding:5px 15px;}
  .awards-memberships .item{padding:0px 10px;}
  </code></pre>