The issue lays here, on bootstrap CSS:
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Having set max-width: 100%;
the image won’t be any larger than the viewport. You need to override that behavior on your CSS:
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
Note the max-width: none;
added at the bottom. This is the default max-width value and unsets the limit.
Here’s your fiddle updated.