让轮播图片覆盖他们的 div [英] let carousel images cover their div

问题描述

我从 Paul Irish HTML5 BoilerPlate 开始了一个基本模板，使用

解决方案

首先，我肯定会在另一个 CSS 文件中覆盖 bootstrap 的样式，因为它允许您将来更新 Bootstrap 而不会丢失您所做的任何更改.

我解决这个问题的方法是为转盘/项目添加一个固定的高度(可以针对不同的断点进行更改)，因为这样处理图像更容易.

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

CSS

.carousel-inner >.物品 {高度:30em；}.carousel-inner >.item img {高度:自动；位置:绝对；顶部:0；变换:translateY(-50%);宽度:100%；}

在宽视点上使用方形图像时，您仍然会遇到一些裁剪问题，但没有太多可以解决的问题.但是，您可以通过调整 .item 高度或其位置来调整图像显示的数量，方法是调整 transform 样式.

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

I've started a basic template from Paul Irish HTML5 BoilerPlate, with http://www.initializr.com/ BootStrap and then a Boot Strap Carousel. My Question is if there is a best practice for stretching the images to cover their div. I'm sure there are several methods, but I was wondering if there was anything specific to this set up I should consider. It's just a template for now and I may have to fine tune it per costumer's specs later.. but I'd like to be able to just drop some basic images in and give them a preview to start with.

Should I just use 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>

```

in the CSS, around 5800 I found about 90 lines that reference the carousel class, before I started getting into the controls. Is this the best place for what I'm trying to do.. or should I over write it in the 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%;
}

on line 5819 of bootstrap.css

.carousel-inner {
  width: 100%;
}

I tried changing this to

.carousel-inner {
  width: cover;
}

but maybe the minifi is overwriting this?

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

解决方案

Firstly I'd definitely overwrite bootstrap's styles in another CSS file because it allows you to update Bootstrap in the future without losing any changes you've made.

The way I'd tackle this is by adding a fixed height to the carousel/items (which can be changed for different breakpoints) as it's easier to deal with the image this way.

Then make the img absolutely positioned relative to the .item. You can then center the image vertically using transform should you want to.

CSS

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

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

You'll still have some cropping issues with square images on a wide viewpoint but there's not a huge amount that can be done about that. You can, however, tweak the amount the image is shown by adjusting the .item height or its position by tweaking the transform style.

Full example: https://codepen.io/raptorkraine/pen/aLOwOQ

这篇关于让轮播图片覆盖他们的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！