Question

我试图让我的'滑块'图像更具响应性。我很确定我的问题是继承问题。

如果“滑块”图像被拉出容器div，它们将根据窗口大小调整大小。

但是，在div中时，图像不会调整大小以适合窗口。

我甚至在img标签中尝试了内联css style =“max-width：100％;” ，但它不会调整大小。

我尝试了多种变体来让图像更流畅。

任何帮助？

HTML

<div id="container">
  <div id="slider"><img src="img/img1.png" /></div>
</div>

CSS

body {
    background-color: #f2f2f2;
    height:100%;
}


#container {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    min-height:100%;
    position:relative;
}

#slider img {
    max-width: 100%;
    height: auto;
}

Answer 1

＆＃13;

body {
  background-color: #f2f2f2;
  height: 100%;
}
#container {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
  /* Only if you want text in there */
}
#slider img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<div id="container">
  <div id="slider">
    <img src="http://dummyimage.com/1000x300/000000/fff.jpg&text=Slide3" />
  </div>
</div>

＆＃13;

这是您的问题的 codepen http://codepen.io/sachya/pen/EutdJ

Answer 2

您是否尝试过使用width代替max-width属性？

#slider img {
  width: 100%;
  height: auto;
}

你有一个网址可以看到你想要做什么吗？

图像不响应Max-Width属性

2 个答案: