title: How to fix a responsive image that works on Firefox but not on Chrome and Safari?
body: <p>I have a <code>row</code> with a bunch of <code>img</code> whose size are capped by their height, and these are displayed properly on Firefox, but stretch on Chrome and Safari. </p>
  
  <p>Firefox
  <img src="https://imgur.com/VOJqoPM.png" alt="Firefox"></p>
  
  <p>Chrome
  <img src="https://imgur.com/KP2mbi3.png" alt="Chrome"></p>
  
  <p>Safari
  <img src="https://imgur.com/X1mWVXZ.png" alt="Safari"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid text-center" style="padding-top: 15px"&gt;
    &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Tools &amp; Software&lt;/h6&gt;
    &lt;div class="row justify-content-center"&gt;
      &lt;img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite"&gt;
      &lt;img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer"&gt;
      &lt;img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS"&gt;
      &lt;img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows"&gt;                
      &lt;img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite"&gt;
      &lt;img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer"&gt;
      &lt;img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS"&gt;
      &lt;img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows"&gt;                
      &lt;img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite"&gt;
      &lt;img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer"&gt;
      &lt;img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS"&gt;
      &lt;img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows"&gt;                
      &lt;img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite"&gt;
      &lt;img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer"&gt;
      &lt;img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS"&gt;
      &lt;img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows"&gt;              
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.skill-icon {
      width: auto;
      height: 50px;
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 5px;
      padding-bottom: 5px;
  }
  </code></pre>
  
  <p>How can I have the dimensions and responsiveness I'm having on Firefox on the other browsers? Thanks in advance!</p>