讓旋轉木馬圖像覆蓋他們的分區

Question

我已經開始從保羅愛爾蘭HTML5 BoilerPlate， 與http://www.initializr.com/ BootStrap，然後啓動皮帶傳送帶基本模板。 我的問題是，如果有一個最佳做法，拉伸圖像覆蓋他們的分區。我確信有幾種方法，但我想知道是否有任何特定的設置，我應該考慮。現在只是一個模板，稍後我可能需要根據客戶的規格微調它。但是，我希望能夠放入一些基本圖像並給它們預覽開始。我想用div.item { background-size: contain; }？

.item { background-size: cover; }？

```

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- 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"> 
       <img src="../img/Pressure_Wash.jpg" alt="Los Angeles"> 
      </div> 

      <div class="item"> 
       <img src="../img/Pressure_Wash.jpg" alt="Chicago"> 
      </div> 

      <div class="item"> 
       <img src="../img/Pressure_Wash.jpg" alt="New York"> 
      </div> 
     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 

```

在CSS

，5800左右我發現引用轉盤類約90行，之前我開始進入管制。這是我想要做的最好的地方..或者我應該寫在main.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%; 
} 

上bootstrap.css的5819線

.carousel-inner { 
    width: 100%; 
} 

我試圖改變這

.carousel-inner { 
    width: cover; 
} 

，但也許是minifi覆蓋呢？

https://github.com/TurtleWolf/CarouselTemplate/issues/1

Answer 1

首先，我肯定會重寫引導的風格在其他CSS文件，因爲它可以讓你在未來，而不會丟失所做的任何更改更新引導。

我要解決這個問題的方法是在旋轉木馬/物品上添加一個固定的高度（這可以針對不同的斷點進行更改），因爲這樣更容易處理圖像。

然後使img相對於.item絕對定位。如果您想要，可以使用transform垂直居中圖像。

CSS

.carousel-inner > .item { 
    height: 30em; 
} 

.carousel-inner > .item img { 
    height: auto; 
    position: absolute; 
    top: 0; 
    transform: translateY(-50%); 
    width: 100%; 
} 

你仍然有廣泛的觀點與方形圖像裁剪的一些問題，但有沒有能關於做一個巨大的數額。但是，您可以通過調整transform風格調整高度或其位置來調整圖像的顯示量。

完整的示例：https://codepen.io/raptorkraine/pen/aLOwOQ