CODEWITHSUNDEEP
twitter-bootstrap
TurtleWolfe
TurtleWolfe

Reputation: 135

let carousel images cover their div

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>

```

capture4

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

Upvotes: 1

Views: 251

Answers (1)

Kieran McClung
Kieran McClung

Reputation: 724

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

Upvotes: 1

Related Questions