Question

我已经从Paul Irish HTML5 BoilerPlate开始了一个基本模板，使用http://www.initializr.com/ BootStrap然后使用Boot Strap Carousel。我的问题是，是否有最佳实践来拉伸图像以覆盖他们的div。我确定有几种方法，但我想知道是否有任何特定的设置我应该考虑。它现在只是一个模板，我可能不得不根据客户的规格对其进行微调。但我希望能够删除一些基本图像，然后给它们预览。

我应该使用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>

```

capture4

在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文件中覆盖bootstrap的样式，因为它允许您在将来更新Bootstrap而不会丢失您所做的任何更改。

我解决这个问题的方法是在旋转木马/项目上添加一个固定的高度（可以针对不同的断点进行更改），因为这样更容易处理图像。

然后使img相对于.item绝对定位。然后，您可以根据需要使用transform垂直居中图像。

<强> CSS

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

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

在宽视角下，方形图像仍然存在一些裁剪问题，但是没有大量可以解决的问题。但是，您可以通过调整.item样式调整transform高度或其位置来调整图像的显示量。

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

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

1 个答案: