html - Bootstrap carousel full screen on every device -

so want carousel should take full height , width of display monitor , scroll down. this, , images inside should fill parent while maintaining ratio. problem either have provide fixed height or take height of largest image. how can make carousel of full screen every device.

$(document).ready(function() {    $("#my-slider").carousel({      interval : 3000,      pause: false    });  })

.container-fluid {    padding-right: 0px;    padding-left: 0px;    margin-right: 0px;    margin-left: 0px;  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-zosebrlbnqzlpnkikedrpv7loy9c27hhq+xp8a4mxaq=" crossorigin="anonymous"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>    <div class="container-fluid">    <div class="row" style="margin-right:0px; margin-left:0px;">      <div class="col-sm-12" style="padding:0px;">        <div id="my-slider" class="carousel slide" data-ride="carousel">          <div class="carousel-inner" role="listbox">            <div class="item active">              <img src="img/image1.jpg"/>            </div>            <div class="item">              <img src="img/image2.jpg"/>            </div>            <div class="item">              <img src="img/image3.jpg"/>            </div>          </div>        </div>      </div>    </div>  </div>    <div class="container" style="margin-top:20px;">    <div class="row">      <div class="col-sm-12 col-md-12 col-xs-12">        <div class="thumbnail" style="border:none; background:white;">          <div class="col-sm-4 col-md-4 col-xs-12 image-container">            <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>          </div>          <div class="col-sm-8 col-md-8 col-xs-12">              <h2>sample heading</h2>            <p style="font-size:15px;">lorem ipsum dolor sit amet, consectetur adipiscing elit. sed hendrerit adipiscing blandit. aliquam placerat, velit fermentum fermentum, mi felis vehicula justo, dapibus quam augue non massa.</p>          </div>        </div>      </div>      <div class="col-sm-12 col-md-12 col-xs-12">        <div class="thumbnail" style="border:none; background:white;">          <div class="col-sm-4 col-md-4 col-sm-push-8 col-xs-12 image-container">            <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>          </div>          <div class="col-sm-8 col-md-8 col-sm-pull-4 col-xs-12">            <h2>sample heading</h2>            <p style="font-size:15px;">lorem ipsum dolor sit amet, consectetur adipiscing elit. sed hendrerit adipiscing blandit. aliquam placerat, velit fermentum fermentum, mi felis vehicula justo, dapibus quam augue non massa.</p>          </div>        </div>      </div>      <div class="col-sm-12 col-md-12 col-xs-12">        <div class="thumbnail" style="border:none; background:white;">          <div class="col-sm-4 col-md-4 col-xs-12 image-container">            <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>          </div>          <div class="col-sm-8 col-md-8 col-xs-12">              <h2>sample heading</h2>            <p style="font-size:15px;">lorem ipsum dolor sit amet, consectetur adipiscing elit. sed hendrerit adipiscing blandit. aliquam placerat, velit fermentum fermentum, mi felis vehicula justo, dapibus quam augue non massa.</p>          </div>        </div>      </div>    </div>  </div>    <div class="container">    <div class="row">      <div class="col-xs-12">        <h2>contact us</h2>        <form action="" method="" class="form-horizontal">          <div class="form-group">            <label for="name" class="col-sm-2 control-label">name</label>            <div class="col-sm-10">              <input id ="name" type="name" name="" class="form-control">            </div>          </div>          <div class="form-group">            <label for="email" class="col-sm-2 control-label">email address</label>            <div class="col-sm-10">              <input id ="email" type="email" name="" class="form-control"></div>          </div>          <div class="form-group">            <label for="message" class="col-sm-2 control-label">message</label>            <div class="col-sm-10">              <input id ="message" type="message" name="" class="form-control"></div>          </div>          <div class="form-group">            <div class="col-sm-10 col-sm-push-2">              <input id ="submit" type="submit" name="" class="btn btn-default"/>            </div>          </div>        </form>      </div>    </div>  </div>

you have use jquery this, when site load need height , width of viewport. , apply height , width carosel.

use code , change carosel class yourself.

$(function(){    var height = $(window).height();    var width = $(window).width();    $(".yourcarosel").css(       {        "height":height,         "width":width       }); }); 

it automatically height , width of window , apply on carosel.