Question

我有一个来自bootstrap的滑块。所以我在滑块中添加了一些图片，但它们没有响应，我怎样才能让它们响应？

APPLY

课堂上我什么都没有“homeIMG” 但宽度“300px”height =“200px”也不起作用......图像保持不变......我做错了什么？

Answer 1

首先，height标记的width和img属性不应包含任何单位，只能包含数字。但是如果你想要一些反应灵敏的东西，不要使用它们，并避免一般使用它们。

使用带有％的css属性，例如：

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

或者

  img {
        width: 100%;
  }

另外，如果你想展示你的问题，请加入一个JSFiddle，这样就可以更容易理解你想要的东西了

Answer 2

将img-resonsive类添加到图片代码中。

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

Answer 3

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

您希望将父项设置为position:relative;，以便滑块项包含图片大小（请注意，如果您的项目类已经有position:absolute，那么就没有必要添加position:relative）

如果您不希望图像显示大于特定大小，则可以设置max-width属性。

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

Answer 4

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

使用CSS进行响应式布局。

＆＃13;

.homeImg {
  width: 100%;
}

＆＃13;

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

＆＃13;

JSFiddle

如何在滑块中使图片响应

4 个答案: