css - 如何使响应式图像占据其父级高度的 100%？

Question

我有这个 HTML:

<article>
    <div class="article-img">
        <img src="http://ebr4q1yu566j250m.zippykid.netdna-cdn.com/wp-content/uploads/2011/02/astronaut.jpg" alt="">
    </div>
    <div class="article-details">
        <h2>Article Title Goes Here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis distinctio tenetur laboriosam consectetur esse facilis quasi alias aspernatur neque ut quae necessitatibus reprehenderit laborum dignissimos repudiandae dolorum numquam magni vero.</p>
    </div>
</article>

还有这个 CSS:

* { margin: 0; padding: 0; }
body { width: 90%; max-width: 50em; }
img { max-width: 100%; }
article { overflow: hidden; border: 1px solid black; margin: 1em; }
.article-details { padding: 1.1em; }

@media screen and (min-width: 40em) {
    .article-img { 
        float: left;
        width: 33%;
        height: 100%;
    }
    .article-details {
        float: right;
        width: 60%;
    }
}

当我的屏幕尺寸达到 40em 时，图片向左浮动。我希望它占据文章高度的 100%。但是，正如您在这个 fiddle 中看到的那样，图像底部和文章底部之间总是有一点差距:http://jsfiddle.net/u7yr8cv1/

为什么会发生这种情况，我该如何解决？谢谢!

Answer 1

这是一个垂直对齐问题。修改你的CSS如下:

* { margin: 0; padding: 0; vertical-align:top; }

参见: http://jsfiddle.net/ry7jLfm9/2/

让我知道你的情况如何。

干杯