JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
    <div id="header-carousel" class="carousel carousel-custom slide" data-ride="carousel">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://wowslider.com/sliders/demo-5/data/images/sweden.jpg">
        </div>
        <div class="item">
          <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
        </div>
      </div>
      
      <!-- Controls -->
        <a class="left carousel-control" href="#header-carousel" 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="#header-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
    </div>

CSS

body,
html {
	width: 100%;
	height: 100%;
}
.header_section {
	height: 100%;
	min-height: 480px;
	max-height: 800px;
	overflow: hidden;
}
.carousel-custom,
.carousel-custom .carousel-inner {
	height: 100%;
}
.carousel-custom .carousel-inner > .item > img {
	height: 500px;
  max-height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 120%;
}