Bootstrap carousel taking full display of right side of a browser window
<p>I am trying to get the <strong>boostrap carousel</strong> taking the full display of the right side of a browser window. </p>

<p>For this, the margins of the carousel should by modified to leave the image in the center of the right side at the max width (5/12 of the page) or max height (height of the browser window) depending on the image aspect ratio. </p>

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

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

<p>Here is a Fiddle with how it is working currently: <a href="https://jsfiddle.net/v71c8udo/7/" rel="nofollow noreferrer">https://jsfiddle.net/v71c8udo/7/</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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      .carousel-inner &gt; .item &gt; img,
      .carousel-inner &gt; .item &gt; a &gt; img {
        width: 100%;
        height: 100%;
        margin: auto;
      }
    &lt;/style&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 class="col-sm-offset-7 col-sm-5" style="margin-right:0px;padding-right:0px; height:100vh;"&gt;
      &lt;br&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;

        &lt;!-- Wrapper for slides --&gt;
        &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
            &lt;img src="https://culturieuse.files.wordpress.com/2015/02/arearea_by_paul_gauguin-joyfulness-1892.jpg" alt="Chania"&gt;
          &lt;/div&gt;

          &lt;div class="item"&gt;
            &lt;img src="http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg" alt="Chania"&gt;
          &lt;/div&gt;

          &lt;div class="item"&gt;
            &lt;img src="http://www.leboismiroir.fr/wp-content/uploads/Pld-Gauguin.jpg" alt="Flower"&gt;
          &lt;/div&gt;


          &lt;!-- Left and right controls --&gt;
          &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
            &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
            &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>