css - 图像对 Max-Width 属性没有反应

Question

我正在尝试让我的“ slider ”图像更具响应性。我相当确定我的问题是继承问题。

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

但是，图像在 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

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

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

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