CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Kateryna
Kateryna

Reputation: 15

Bootstrap img-responsive doesn't work, picture is still longer than screen

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>

    <div class="item col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>

    <div class="item col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>
</div>

I have tried to search, but nothing solved my problem. I do not want to use display: table, as I read in similar question. Any help will be very appreciated.

Upvotes: 1

Views: 1788

Answers (5)

Kateryna
Kateryna

Reputation: 15

I have found an answer, I have tried all solutions, that were posted here, but col-xs-12 col-md-10 col-md-offset-1 worked for me, so I added col-md-10 col-md-offset-1 to my previous markup.

Upvotes: 0

Darshit Shah
Darshit Shah

Reputation: 15

Add the this line in your CSS file to fix the problem:

.img-responsive{ width:100% !Important;}

Upvotes: 0

Rahul
Rahul

Reputation: 2071

Set the width property in your image.

<img src="http://placehold.it/1920x1080" alt="Carousel image" class="img-responsive" width="100%" />

Note: width="100%" isn't W3C valid. But it work almost all modern or old browser.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
    <div class="item">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
    <div class="item">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
  </div>
</div>

You can try this.

Upvotes: 0

Divyesh Kanzariya
Divyesh Kanzariya

Reputation: 3789

Change .img-responsive inside bootstrap.css to the following:

.img-responsive {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

For some reason adding width: 100% to the mix makes img-responsive work. It also work in Firefox as well as Chrome.

and also try this :

.item img {
  width:100%;
}

Upvotes: 1

Rahul
Rahul

Reputation: 4364

To keep your image responsive you better used 

img{
  max-width: 100%
}

as per your comment it seems like this css is been overwritten by some other css, so you can use css specificity here like below

img, .container img.img-responsive{
  max-width: 100%;
}

this will keep your img inside your screen size and this is common technique we used to keep our images responsive

Upvotes: 0

Related Questions