固定高度的Bootstrap傳送帶：根據圖像尺寸水平或垂直放置中心圖像

我有一個固定高度的引導傳送帶。這裏是CSS：固定高度的Bootstrap傳送帶：根據圖像尺寸水平或垂直放置中心圖像

.carousel-custom .carousel-outer { 
    position: relative; 
} 


@media(min-width: 992px){ 
    .carousel-custom { 
     margin-top: 20px; 

    .carousel-inner { 
     height: auto; 
    .item { 
     height:500px; 
     line-height:300px; 
     } 
    } 
    } 
} 

@media(max-width: 991px){ 
.carousel-custom { 
     margin-top: 20px; 

    .carousel-inner { 
     height: auto; 
    .item { 
     height:300px; 
     line-height:300px; 
     text-align:center; 

     } 
    } 
    } 
}

這裏是我的標記：

<div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel"> 
     <div class="carousel-outer"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd"> 
       <div class="carousel-caption"></div> 
      </div> 
      <div class="item"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p"> 
       <div class="carousel-caption"></div> 
      </div> 
      <div class="item"> 
       <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932"> 
       <div class="carousel-caption"></div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 

     <!-- Indicators --> 
     <ol class="carousel-indicators mCustomScrollbar"> 
      <li data-target="#carousel-custom-1188" data-slide-to="0" class="active"> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd"> 
      </li> 
      <li data-target="#carousel-custom-1188" data-slide-to="1" class=""> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p"> 
      </li> 
      <li data-target="#carousel-custom-1188" data-slide-to="2" class=""> 
       <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932"> 
      </li> 
     </ol> 
     </div> 
    </div>

的問題是，我有一個非常寬的圖像，他人很窄，高，具有良好的口糧高度他人/寬度在同一個輪播中。

我想要垂直居中的寬圖像（寬度爲100％），水平居中的高圖像（高度爲100％）和「正常」圖像（具有適當的比例高度/寬度）填滿所有的旋轉木馬。

這是我正在嘗試做的事情（第一張圖片是一個非常寬的圖片，第二張圖片的圖片非常高，最後一張圖片的圖片比例很好）。

我怎麼能做到這一點？我試過Make Bootstrap's Carousel both center AND responsive?和Google上的其他技巧，但都沒有做到這一點。

來源

2016-03-28 Graham Slick

很難幫你，因爲你分享從模板非處理連線代碼。如果您共享呈現的HTML代碼更好，並且可能有簡單的解決方案。如果我理解你的問題，你只需要將滑塊中的圖像完美對齊（垂直和水平）。 –

@MarcosPérezGude感謝您的回答，我使用呈現的HTML編輯帖子（對於3張圖片的旋轉木馬）。我需要的是將圖像完美居中，但如果它太寬或太窄，並且沒有隱藏其中的一部分（我試過許多解決方案，其中部分圖片被隱藏），但不會伸展它 –

由於.item元素是相對定位的，您可以絕對地定位img元素。將.item元素固定高度，將有助於垂直和水平對齊內部圖像。

我確定有很多不同的方法來做到這一點，這裏是一個例子。希望能幫助到你。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
.carousel-inner > .item { 
 
    height: 100vh; 
 
} 
 

 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    max-height: 800px; 
 
    width: auto; 
 
} 
 

 
.carousel-control.left, 
 
.carousel-control.right { 
 
    background-image: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 

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

 
    <!-- inner --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/1200x600/2c3e50/000" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x1200/d35400/000" alt=""> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x600/c0392b/000" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <!-- controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    
 
    </div> 
 

 
</div>

來源

2016-03-31 07:26:45 DavidDomain

好吧，我已經擺弄了一段時間了。結果如下。希望它可以幫助並回答你的問題（至少在一小部分）。

<head> 
    <title>Bootstrap Carousel</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
    html, 
    body { 
     height: 100%; 
    } 

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

    .carousel-inner { 
     height: 100%; 
    } 

    /* Background images are set within the HTML using inline CSS, not here */ 

    .fill { 
     width: 100%; 
     height: 100%; 
     background-position: center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     -o-background-size: cover; 
    } 

    footer { 
     margin: 50px 0; 
    } 

    .tester { 
     height: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div class="tester"> 
    <!-- Full Page Image Background Carousel Header --> 
    <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 
     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </header> 
    <script> 
    $('.carousel').carousel({ 
     interval: 5000 //changes the speed 
    }) 
    </script> 
    </div> 
</body>

再次，希望它有幫助！

來源

2016-03-30 16:30:14 Craz1k0ek

對於旋轉木馬工作，img標籤是必要的 –

-2

如果試圖在引導轉盤來實現這一點，你最終會在頂部和底部的黑條...我堅持了類似的問題，結束了使用「flickity」 JS library..it作品很多比tryig實現這個東西並不意味着這更好的....

來源

2016-04-06 00:09:40

只需使用圖像上絕對的，如果你的滑塊的高度是固定的

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

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="middle"> 
     <img src="http://placehold.it/1920x500"> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="middle"> 
     <img src="http://placehold.it/1920x300"> 
     </div> 
    </div> 
    <div class="item"> 
     <div class="middle"> 
     <img src="http://placehold.it/600x900"> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div>

個

CSS

.carousel { 
    width: 500px; /*test width*/ 
    height: 300px; /*what ever height */ 
} 

.middle { 
    position: relative; 
    height: 300px; /*what ever height */ 
} 

.middle img { 
    max-width: 100%; 
    max-height: 100%; /*what ever height */ 
    margin: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

看到fiddle

來源

2016-04-06 07:10:15

固定高度的Bootstrap傳送帶：根據圖像尺寸水平或垂直放置中心圖像

回答

相關問題