Bootstrap Carousel Isn't Responsive in Full Screen

Question

I am working on a carousel that is 50% off a page. It is the same one that is in the bootstrap modern business template. I have tried multiple ways to get the images to be responsive when re-sizing the page with no luck. The images are 1920px x 740px. The 1st one is correctly aligned when it's a half page, but when it's in fullscreen mode it is cut off. The code in the 3rd image is what came in the template and the first two were my attempts to fix it.

The carousel scrolls correctly, the buttons work etc. It's just the responsive portion I cannot figure out.

This is my first post on here, so if there is more information you need please let me know. Also I apologize if this is not formatted correctly. Thank you for any & all help.

<div class="carousel-inner">
        <div class="item active">
            <img src=img/logo3.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2></h2>
            </div>
        </div>
        <div class="item">
         <img src=img/logo2.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

There are 2 .css files in the template I am using. Here is the css for the carousel for both

/* Home Page Carousel */

header.carousel {
height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}

header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
} 

And the second - I didn't include the controls css since that part is working.

.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
   -o-transition: .6s ease-in-out left;
      transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
     -o-transition:      -o-transform .6s ease-in-out;
        transition:         transform .6s ease-in-out;

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-perspective: 1000;
        perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}

Answer 1

What about change your class:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}

to:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
display: block;
max-width: 100%;
height: auto;
}

and check it out?.