Trying to make the bootstrap carousel take up the entire display of the right side of a browser window.
To achieve this, the margins of the carousel need to be adjusted so that the image is positioned in the center of the right side with maximum width (5/12 of the page) or maximum height (height of the browser window) based on the aspect ratio of the image.
Here's an example of what I'm aiming for:
https://i.sstatic.net/hCF2q.png
View how it currently works in this Fiddle: https://jsfiddle.net/v71c8udo/7/
Below is the current HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">website</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="col-sm-offset-7 col-sm-5" style="margin-right:0px;padding-right:0px; height:100vh;">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://culturieuse.files.wordpress.com/2015/02/arearea_by_paul_gauguin-joyfulness-1892.jpg" alt="Chania">
</div>
<div class="item">
<img src="http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg" alt="Chania">
</div>
<div class="item">
<img src="http://www.leboismiroir.fr/wp-content/uploads/Pld-Gauguin.jpg" alt="Flower">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>