CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Anonymous
Anonymous

Reputation: 1990

making an image responsive according to screen in bootstrap carousel

I have a bootstrap carousel which takes full width and height of the screen. However when the screen-size is less than 600px,it looks likeenter image description here

clearly there is a gap at bottom,which i do not want. at small size(<600px) i want the image to be like : enter image description here

So that there is no bottom margin and only left part of the image is displayed. Can it be achieved with css .My code is here. Thanks in Advance. Relevant css and html are as follows:

<header>

  <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 src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Chania" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Chania" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Flower" width="100%" height="100%">
      </div>

      <div class="item">
        <img src="http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg" alt="Flower" width="100%" height="100%">
      </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>
</div>

css:

html
    {height:100%;
        margin:0;
        overflow:hidden;
    }
    body
    {   margin:0;
        height:100%;
    }

    header{

        height:100%;
    }

Upvotes: 1

Views: 950

Answers (1)

max
max

Reputation: 8687

You can try with background images instead of image tags (there is a problem with img tag and aspect ratio):

CSS:

.image {
  background-image: url(http://cdn.wallpapersafari.com/65/29/U5VN6e.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

JS:

$(window).resize(function() {
  $('.item > .image').css('height', $(window).height());
}).trigger('resize');

CODEPEN

Upvotes: 1

Related Questions