如何使图片在滑块中响应

Question

I have a slider from a bootstrap. So I added some pictures in the slider but they are not responsive, How can i make them responsive?

  <div class="item">
        <div class="carousel-caption">
       <p>Kledingwinkel(Dronten)</p>
        </div>
      <img src="switch/2.jpg" alt="robot"  width="300" height="200px" class="homeImg">
    </div>

I have nothing in the class "homeIMG" but the width "300px" height="200px" is also not working... the image stays te same... what am I doing wrong?

Answer 1

First of all, height and width attributes of the img tag should not contain any unit, only a number. But don't use them if you want something responsive, and avoid using both in general.

Use css attributes with % such as :

img {
    max-width: 50%;
    max-height: 50%;
}

Or

  img {
        width: 100%;
  }

Also, include a JSFiddle if you want to show your problem, so it's easier to understand what you want exactly

Answer 2

将img-resonsive类添加到image标签。

<img src="switch/2.jpg" alt="robot" class="homeImg img-responsive">

Answer 3

You'll want to remove the width/height declarations from your tag. Instead you can set the width of the image to be 100%.

You'll want to set the parent item to be position:relative; so the images size is contained by the slider item (note if your item class already has position:absolute then it wont be necessary to add position:relative )

If you dont want your image to appear any bigger than a certain size, you can set the max-width property.

    .item{
     position:relative;
    }
    .homeImg{
      width:100%;
      max-width:500px; /*this can also be percentages*/
      max-height:300px;
    }

Answer 4

You can't make the image responsive while you're specifying fixed width and height.

Use CSS for responsive layout.

 .homeImg { width: 100%; } 

  <div class="item"> <div class="carousel-caption"> <p>Kledingwinkel(Dronten)</p> </div> <img src="http://www.w3schools.com/css/trolltunga.jpg" alt="robot" class="homeImg"> </div> 

JSFiddle