Fullscreen no-scrollbars image carousel - html

Question

I have a Bootstrap 3.1.1 page with a fixed navbar and a sticky footer.
I need to show fullscreen (minus fixed navbar and sticky footer) images in a carousel. The cropping can be both from x and y, but the center of the image needs to be at the center of the viewport.
This is where I'm at now:
Bootply
Problem is I can't make the carousel appear. heght: 100% doesn't seem to work.
A CSS only solution is preferred, but I don't mind a little javascript though.

Answer 1

You can add the img-responsive class to your images, leaving your code like this:
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<!-- Begin carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1600x1200/0000aa" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/2592x1944/00aa00" alt="...">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/3264x2448/aa0000" alt="...">
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
This will make your images behave just as you want, but with your approach, the fixed footer will leave some blank space. This depends on what you try to achieve, of course, but I think you would be better with a position:relative or position:absolute footer, otherwise you'll need to make some measurements with JS or jQuery.
Optionally, you can use vh length for everything and instead of img elements, make those images be the backgrounds for their respective item, so you can apply a background-size:cover property and be a happy camper

Answer 2

If you want no scroll you should use overflow: hidden but it is imposible that your image will be displayed without any crop because your image has a fixed size and there are lots of diferent devices with diferent view ports. It's just a matter of from what you want to crop. (width or height) If you want to crop from the width you should use height: 100% for that image and if you want to crop the width you should use the img-responsive class.
I guess for your case you should add the height of the image 100%, the overflow of the body hidden and center the image with margin: 0px auto;