Zoom or crop a background image instead of stretching it
<p>I have a <strong>background image</strong> which takes the full width of the browser window.
This background image should have a fixed height, lets say 500 px.</p>

<p>I'm trying to get this image to be as complete as possible when its aspect ratio is close to the one of the browser window, and then to zoom or crop on a part
of the image (middle for example) rather than stretching it or displaying just a side of it when the browser window gets larger.</p>

<p>Here is an example of what I am trying to get:</p>

<p><a href="https://i.stack.imgur.com/HdyTR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HdyTR.png" alt="enter image description here"></a></p>

<p>Here is a Fiddle with how it is working currently: <a href="https://jsfiddle.net/bb61c412/" rel="nofollow noreferrer">https://jsfiddle.net/bb61c412/</a></p>

<p>And here is the current HTML code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class="navbar navbar-default navbar-fixed-top "&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a href="#" class="navbar-brand"&gt;website&lt;/a&gt;
        &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;


  &lt;div style="width:100vw; height: 500px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;"&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>