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溢出，那么您应该以某种方式使容器响应，并且图像将继续填充100％的响应容器。

Answer 2

正如SLL所指出的，你还需要容器才能响应，这段代码应该可以工作。

jsFiddle

请注意页面换行中的更改，我将容器更改为响应最大宽度为800px;

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

并将img max width更改为100％，因此它适合容器大小：

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

CSS3图像无响应

2 个答案: