title: How to Make an Image Fill the Container Height and Retail Aspect Ratio with Bootstrap 4
body: <p>How can an image fill the parent container height, and retain the aspect ratio?
  I have used a similar pattern before (see below), but I believe that Bootstrap 4 may be interfering here. When viewing the image in a mobile view port, the image is stretching vertically.</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>div#parent { position: relative; }
  h1 { color: #FFF }
  img#child { 
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -100;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
      &lt;img id="child" 
      src="https://cdn.pixabay.com/photo/2016/07/08/08/59/background-1503863_1280.png" alt="Background" /&gt;
      &lt;h1&gt;Very very very very very very very very very very very long heading 
      to go over image in mobile view. The image should not stretch 
      vertically.&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>