imgタグを使用して携帯端末でストレッチせずにブートストラップスライダーイメージをフルスクリーンで表示する方法は？

Question

私はこのリンク（http://codepen.io/jpI/pen/rrVPZd）にスライダを創設しました。デスクトップで私のために働いていますが、モバイルデバイスで問題を起こしています。このスライダーはモバイルで全画面表示されていません。私はCSSの下で試してフルスクリーンを取得しましたが、画像は伸びています。画像の中央部分のみを表示する必要があります。これであなたを助けてください。事前に

おかげで、モバイルデバイスで

のCss

//取得した画像をフルスクリーン。

.carousel-inner>.item>img, .carousel-inner>.item>a>img{ 
    height: 100%; 
    } 

Answer 1

にストレッチしません、私は少しをあなたのコードを修正しました。
主なアイデアは、カバー効果を達成するためにimgsの代わりに背景を使用することです。
1. IMGSから背景

.carousel-inner .item { 
/* max-height: 680px; */ 
    height: 100vh; 
    background: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg') no-repeat center top; 
    background-size: cover; 
} 

.carousel-inner .item:nth-child(2) { 
    background-image: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg'); 
} 

.carousel-inner .item:nth-child(3) { 
    background-image: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg'); 
} 

2への変更小さな画面上で縦にタイトルを中央に

.carousel-caption { 
    bottom: 36%; 
} 

@media screen and (min-width: 768px) { 
    .carousel-caption { 
    right: 20%; 
    left: 20%; 
    } 
} 

Answer 2

<div id="carousel-example" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example" data-slide-to="1"></li> 
    <li data-target="#carousel-example" data-slide-to="2"></li> 
    </ol> 

    <div class="carousel-inner"> 
    <div class="item active"> 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
     <div class="carousel-caption"> 
     <h3>Meow</h3> 
     <p>Just Kitten Around</p> 
     </div> 
    </div> 
    <div class="item"> 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
     <div class="carousel-caption"> 
     <h3>Meow</h3> 
     <p>Just Kitten Around</p> 
     </div> 
    </div> 
    <div class="item"> 
     <a href="#"><img src="http://placekitten.com/1600/600" /></a> 
     <div class="carousel-caption"> 
     <h3>Meow</h3> 
     <p>Just Kitten Around</p> 
     </div> 
    </div> 
    </div> 

    <a class="left carousel-control" href="#carousel-example" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

使用このことは、モバイル

Answer 3

html { 
    position: relative; 
    min-height: 100%; 
} 
.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    transition-property: opacity; 
} 
.carousel-fade .carousel-inner .active { 
    opacity: 1; 
} 
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1; 
} 
.carousel-fade .carousel-control { 
    z-index: 2; 
} 
@media all and (transform-3d), 
(-webkit-transform-3d) { 
    .carousel-fade .carousel-inner > .item.next, 
    .carousel-fade .carousel-inner > .item.active.right { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.prev, 
    .carousel-fade .carousel-inner > .item.active.left { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.next.left, 
    .carousel-fade .carousel-inner > .item.prev.right, 
    .carousel-fade .carousel-inner > .item.active { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
} 
.item:nth-child(1) { 
    background: url(https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?q=75&fm=jpg&s=55746bd56e02a131b1e48c12196ea866) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(2) { 
    background: url(https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?q=75&fm=jpg&s=85ab821f3fa535036a68155aab571bad) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(3) { 
    background: url(https://unsplash.imgix.net/photo-1414073875831-b47709631146?q=75&fm=jpg&s=731b6d5150eea8bafa63ae8194e72ebd) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.carousel { 
    z-index: -99; 
} 
.carousel .item { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 
.title { 
    text-align: center; 
    margin-top: 20px; 
    padding: 10px; 
    text-shadow: 2px 2px #000; 
    color: #FFF; 
} 

<div class="carousel slide carousel-fade" data-ride="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     </div> 
     <div class="item"> 
     </div> 
     <div class="item"> 
     </div> 
    </div> 
</div> 

<div class="title"> 
    <h1>This is Awesome</h1> 
</div>