全幅だが高さ固定の応答スライダ

Question

http://blog.invisionapp.comのような応答性と固定された高さの応答性スライダを作りたい。

どうすればよいですか？JAVASCRIPT

HTML

<div id="img-carousel" data-ride="carousel" class="carousel slide"> 
    <!-- Indicators--> 
    <ol class="carousel-indicators"> 
    <li data-target="#img-carousel" data-slide-to="0" class="active"></li> 
    <li data-target="#img-carousel" data-slide-to="1"></li> 
    <li data-target="#img-carousel" data-slide-to="2"></li> 
    </ol> 
    <!-- Wrapper for slides--> 
    <div role="listbox" class="carousel-inner"> 
    <div class="item active"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg" alt=""/> 
     <div class="carousel-caption"> 
     <h2 class="animated fadeInDown">Caption Animation</h2> 
     <p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p> 
     </div> 
    </div> 
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg" alt=""/> 
     <div class="carousel-caption"> 
     <h2 class="animated bounceInDown">Bootstrap Slider</h2> 
     <p class="animated bounceInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Get Started</a></p> 
     </div> 
    </div> 
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg" alt=""/> 
     <div class="carousel-caption"> 
     <h2 class="animated fadeInDown">Mobile Friendly</h2> 
     <p class="animated fadeInRight"><a href="#" class="btn btn-transparent btn-rounded btn-large">Download Now!</a></p> 
     </div> 
    </div> 
    </div> 
    <!-- Controls--><a href="#img-carousel" role="button" data-slide="prev" class="left carousel-control"><i aria-hidden="true" class="fa fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="#img-carousel" role="button" data-slide="next" class="right carousel-control"><i aria-hidden="true" class="fa fa-chevron-right"></i><span class="sr-only">Next</span></a> 
</div> 

CSS

.carousel-inner .item { 
    max-height: 680px; 
} 
.carousel-inner .item:after { 
    content: ""; 
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

.carousel-control { 
    width: 10%; 
} 

.carousel-control .fa { 
    position: absolute; 
    top: 50%; 
    z-index: 5; 
    display: inline-block; 
} 
.carousel-control .fa.fa-chevron-right { 
    right: 50%; 
    margin-right: -10px; 
} 

@media screen and (min-width: 768px) { 
    .carousel-control .fa { 
    width: 30px; 
    height: 30px; 
    margin-top: -15px; 
    font-size: 30px; 
    } 
} 
@media screen and (min-width: 768px) { 
    .carousel-control .fa-chevron-left { 
    margin-left: -15px; 
    } 
} 
/** 
* Slider caption 
*/ 
.right.carousel-control, .left.carousel-control { 
    display: none; 
} 
.carousel-caption h2 { 
    color: #fff; 
    font-size: 40px; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
} 
.carousel-caption p { 
    font-family: "Oswald", sans-serif; 
    font-weight: 300; 
    font-size: 20px; 
    margin-bottom: 50px; 
} 
@media screen and (min-width: 768px) { 
    .carousel-caption { 
    right: 20%; 
    left: 20%; 
    bottom: 20%; 
    } 
} 
.btn-transparent { 
    background: transparent; 
    color: #fff; 
    border: 2px solid #fff; 
} 
.btn-transparent:hover { 
    background-color: #fff; 
} 

.btn-rounded { 
    border-radius: 70px; 
} 

.btn-large { 
    padding: 11px 45px; 
    font-size: 18px; 
} 

/** 
* Change animation duration 
*/ 
.animated { 
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
} 


.blogs img{ 
    width: 100%; 
} 

：

私は（私もJSFiddleを作りました）次のコードを書いています

$('.carousel').carousel({ 
    pause: 'none' 
}) 

Answer 1

このようにカルーセルを調整します。2000pxは、あなたが望む最も広いです。

.carousel.slide{ 
    max-width: 2000px; 
    overflow: hidden; 
} 
.carousel-inner{ 
    width: 2000px; 
    left: 50%; 
    margin-left: -1000px; 
} 

デモ：http://www.bootply.com/Z8eLP7G4MN

Answer 2

はちょうどあなたのCSSに以下のIMGのスタイルが含まれます。

y軸の値を変換して、画像を目的のセクションに配置します。私はhttp://stackoverflow.com/questions/19481334/bootstrap（あなたは[こちら]の答えを見つけることができる必要があり、それは

@media screen and (min-width: 768px) { 
    .carousel-control .fa-chevron-left { 
    margin-left: -15px; 
    } 
    img{ 
    display: block; 
    height: auto; 
    left: 50%; 
    min-height: 100%; 
    min-width: 100%; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translate(-50%, 0%); 
    width: auto; 
    } 
}