CSS3图像没有响应

Question

我正在尝试使我的图像响应能力，但它不起作用。有人可以指出我的代码出了什么问题吗？

html

<article class="main-story">
    <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>
    <div class="story-intro">
        <h1>Most Important Story</h1>
        <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
    </div>
</article>

CSS

.main-story {
    position: relative;
    width: 800px;
    margin: 0 0 25px 0;
}
.main-story > img {
  max-width: 100%;
  max-height: 100%;
}

这是我的完整代码JSFIDDLE

Answer 1

图像的容器（.main Story）始终为800px，并且由于此空间可用（并且不大于您的图像），因此您的图像始终填充容器。<<<<<<<<<<<<<<

如果您不想要X-Overflow，则应该以某种方式使容器响应，并且图像将继续填充100％响应容器的100％。

Answer 2

正如SLL指出的那样，您还需要容器要响应，此代码应起作用。

jsfiddle

请注意页面包装的更改，在其中我更改了容器以响应最大宽度800px;

.page-wrap {
        width: 100%;
        margin: 20px auto;
        max-width: 800px;
    }

并将IMG最大宽度更改为100％，因此适合容器尺寸：

img {
        display: block;
        max-width: 100%;
    }