CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3205189
user3205189

Reputation:

How to make bootstrap carousel image responsive?

I want to keep the same ratio of the images. The problem is it streches when the browser is wide. and squezes when it's reduced.

I have checked all SO question here but most of them did not help me.

Here is the markup:

<!-- 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>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/female/IMG_5053-2.jpg" 
           data-src="images/female/IMG_5053-2.jpg" alt="First slide">

and here is the CSS

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

I tried to make a jsfiddle but I couldnt here is the link to the page http://maanastore.com/home.php

Upvotes: 21

Views: 112585

Answers (6)

Mugoya Dihfahsih
Mugoya Dihfahsih

Reputation: 425

i have been working on a project of such this might help someone in need of a slider which is responsive with the browser.

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700");
body {
  font-family: "Open Sans", sans-serif;
  color:black;
}

slider{
  display: block;
  width: 100%;
  height: 80%;
  overflow: hidden;
  position: absolute;
}
 
 slider > *{
  position: absolute;
  display: block;
  width:100%;
  height: 100%;
  animation: slide 8s infinite;
 }

 slide:nth-child(1){
  left:0%;
  animation-delay: -10s;
  background-image: url(../images/slider7.jpeg);
  background-size: cover;
  background-position: center;
 }

 slide:nth-child(2){
  animation-delay: -12s;
  background-image: url(../images/slider2.jpeg);
  background-size: cover;
  background-position: center;
 }


 slide:nth-child(3){
  animation-delay: -14s;
  background-image: url(../images/slider6.jpeg);
  background-size: cover;
  background-position: center;
 }
  slide:nth-child(4){
  animation-delay: -16s;
  background-image: url(../images/slider0.jpeg);
  background-size: cover;
  background-position: center;
 }


slide p{
  font-family: Comfortaa;
  font-size: 70px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin:10%;
  color:#fff;
}
slide h1{
  font-family: Comfortaa;
  font-size: 60px;
  text-align: center;
  display: inline-block;
  color:#fff;
  margin-top: 20%;
  margin-left: 10%;
}
@keyframes slide {
  0% {left:100%; width:100%;}
  5% {left:0%;}
  25% {left:0%;}
  30% {left: -100%; width: 100%;}
  30.0001%{left: -100%; width:0%;}
  100%{left: 100%; width: 0%}

}
<section class="container">
		<slider>
			<slide></slide>
		    <slide><h1>Slide Text one</h1></slide>
		    <slide><h1>Slide Text Two</h1></slide>
		     <slide><h1>Slide Text Three</h1></slide>
		</slider> 
 </section>

This link can also give you more insights Making Images Responsive

Upvotes: 0

gvbaker55
gvbaker55

Reputation: 9

I made these adjustment to bootstrap.css at lines 5835 - 5847:

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

Worked like a champ!

Upvotes: -1

Quade du Toit
Quade du Toit

Reputation: 91

what i ended up doing was adding a div inside then have the image background of the div as responsive

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <div class="img1">
        </div>
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">-->
    </div> 
</div> 


<style>
  .carousel-inner { 
     height: 100vh;
     <! --  custom hight -->
  }

  .carousel-item  { 
     height: 100%;
  }

  .img1 {
     background-image: url('../images/home/bng_00.jpg');
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-attachment: fixed !important;
     background-size: cover !important;   
     background-position: center !important;
    }
</style>

Upvotes: 1

jantonioavalos
jantonioavalos

Reputation: 19

You can do a typical use of margin, to improve your result centering your image. 

.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.    
max-width: 100%; }

Upvotes: 0

Cameron
Cameron

Reputation: 554

I found it best to remove the following.

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

and in .carousel remove:

height: 500px;

and in .carousel .item remove

 height: 500px;

for me this made the image work the way I wanted it to but be sure to insert an image in your html first or else I think it will just collapse into nothingness if you are working locally.

edit: Another user suggested I add this
Please Note that if the image shows grey bars on either side or even on one side, I'd recommend keeping

.carousel-inner > .item > img {
    min-width: 100%;
}

Upvotes: 7

Ravimallya
Ravimallya

Reputation: 6610

Remove the following CSS rules from respective files:

In home.php file

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Also, add margin-top: 51px; to .carousel class in carousel.css file and remove height:500px from the same class, because you have fixed navbar.

Upvotes: 14

Related Questions