让旋转木马图像覆盖他们的分区

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