부트 스트랩 캐 러셀이 전체 화면에서 반응하지 않음

Question

페이지에서 50 % 떨어져있는 회전식 작업을하고 있습니다. 이것은 부트 스트랩 모던 비즈니스 템플릿에있는 것과 같습니다. 행운을 빌어 페이지 크기를 재조정 할 때 이미지가 반응하도록 여러 가지 방법을 시도했습니다. 이미지는 1920x740 픽셀입니다. 첫 번째 것은 절반 페이지 일 때 올바르게 정렬되지만 전체 화면 모드에서는 잘립니다. 세 번째 이미지의 코드는 템플릿에 포함 된 코드이며 처음 두 개는 수정하려는 시도입니다.

회전식 캐 러셀이 올바르게 스크롤되며 버튼이 작동합니다. 알아낼 수없는 부분입니다.

여기는 내 첫 번째 게시물이므로 자세한 정보가 있으면 알려 주시기 바랍니다. 또한이 형식이 올바르게 지정되지 않은 경우 사과드립니다. 어떤 & 도와 주셔서 감사합니다.

사용중인 템플릿에 2 개의 .css 파일이 있습니다. 여기에 두

/* 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; 
} 

그리고 두 번째의 회전 목마에 대한 CSS는 - 그 부분이 작동하기 때문에 내가 컨트롤의 CSS를 포함하지 않았다.

.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

어떤 변화에 대한 클래스 :

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

에 :

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

과 체크 아웃?