title: How to resize an image to always fit all screen sizes (eg. Bootstrap 4)?
body: <p>I am trying to get an image to be centered on screen and actually fit the screen, but I am running into the problem that the height of the image is getting to big (so on screen sizes above a tablet the user has to scroll to see the whole image).</p>
  
  <p>This is what I am trying to accomplish:</p>
  
  <p><a href="https://i.stack.imgur.com/LbfV8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LbfV8.png" alt="enter image description here"></a></p>
  
  <p>The expected results are on the top row. No matter what the screen size is the image should always be centered with a small gab to the bottom.
  The bottom row shows my results. Als long as the browser height is tall enough the image is centered from phone to tablet size. Making the browser wider scales the images too much so that part of it is outside.</p>
  
  <p>I am using Bootstrap. This is what I did:</p>
  
  <pre><code>&lt;div class="container py-3"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;img src="/images/gallery/inst01.jpg" class="img-fluid d-block rounded"&gt;
              &lt;i class="fas fa-caret-square-left fa-2x "&gt;&lt;/i&gt;
          &lt;/div&gt;             
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the feeling that the container height is the problem or that the image pushes the container to become too big, but I have no idea how to keep the container smaller than the browser window (or at least just as big) or how to scale down the image so that it stays above the browser bottom.</p>
  
  <p>Can anyone help?
  Thanks</p>