Html 如何使图片在滑块中响应

我有一个从引导滑块。 因此，我在滑块中添加了一些图片，但它们没有响应，如何使它们响应

  <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>

克莱丁文克尔（德龙腾）

我在“homeIMG”班上什么都没有

---

但宽度“300px”height=“200px”也不起作用。。。图像保持不变。。。我做错了什么？

首先，

img

标签的

高度

和

宽度

属性不应该包含任何单位，只应该包含一个数字。但是，如果你想要一些响应性强的东西，就不要使用它们，一般来说，避免同时使用它们

将css属性与%一起使用，例如：

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

或

---

另外，如果您想显示您的问题，请包含一个JSFIDLE，这样就更容易准确地理解您想要什么

将

img resensive

类添加到图像标记中

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

---

您需要从标记中删除宽度/高度声明。相反，您可以将图像的宽度设置为100%

您需要将父项设置为

position:relative

因此图像大小包含在滑块项目中（注意，如果您的项目类已经有

位置：绝对

，则无需添加

位置：相对

）

如果不希望图像的大小超过某个特定的大小，可以设置“最大宽度”属性

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

---

指定固定宽度和高度时，无法使图像响应

使用CSS进行响应性布局

.homeImg{
宽度：100%；
}

克莱丁文克尔（德龙腾）

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