CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
puneet saraswat
puneet saraswat

Reputation: 41

How to scale down images in bootstrap carousel

I am trying to build a carousel which acts as a background image cover for my website kind of of like revolutionary slider in wordpress but not a plugin. Iam building it just for my static website. The problem is that some my images are different height and widths so the carousel doesn't adjust properly. for example img no. 1 is 2048*3072 px 2nd is 3072*2048 px and so on.I want to make my carousel height and width to be 100% like a cover image. when i do set min-width and height to be 100% and 100vh respectively the images gets cropped from the bottom. any help? Here is my code

 <!--carousel-->
<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>
     <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
     <div class="item active">
     <img class ="fill"src="img/msp_0409_3522.jpg" alt="Chania">
    </div>

     <div class="item">
      <img class ="fill" src="img/msp_0406_1786.jpg" alt="Chania">
     </div>

     <div class="item">
      <img class ="fill" src="img/msp_1608_9566.jpg" alt="Flower">
     </div>

    <div class="item">
     <img class ="fill" src="img/msp_1605_6918.jpg" alt="Flower">
    </div>
    </div>

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

css

  html,body{
  height:100%;
  }
  .carousel,.item,.active{
 height:100%;
   }
 .carousel-inner{
 height:100%;
 }
 .fill{
  width:100%;
  height:100%;
  background-position:center
  ;background-size:cover;
  }

Upvotes: 3

Views: 1655

Answers (3)

TECHMIX.be
TECHMIX.be

Reputation: 11

for background image, you can use:

background-image: url("image.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Upvotes: 0

Elliot
Elliot

Reputation: 31

In your code it looks like .carousel-inner>.item>img is overriding your fill class. In order to override the bootstrap property add an !important to your class.

.fill {
    width: 100%;
    height: 100% !important;
}

You also do not need the background-position or background-size as they only style background images

Code Pen link

Upvotes: 2

Alexandre Nicolas
Alexandre Nicolas

Reputation: 1949

you should use object-fit property. You can try something like that:

.carousel-inner img {
  object-fit: contain;
}

https://css-tricks.com/almanac/properties/o/object-fit/

Upvotes: 0

Related Questions