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

【问题标题】：How can I make responsive image take up 100% of its parent's height?如何使响应式图像占据其父级高度的 100%？
【发布时间】：2014-12-08 16:04:41
【问题描述】：

我有这个 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%。但是，正如您在这个小提琴中看到的那样，图像底部和文章底部之间总是有一点差距：http://jsfiddle.net/u7yr8cv1/

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

【问题讨论】：

同时设置高度和宽度意味着图像不会保持它的纵横比。可以满足您的需求吗？

标签： css responsive-design image-scaling

【解决方案1】：

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

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

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

让我知道这对你有什么好处。

干杯

【讨论】：

这并不能解决任何问题。他要求图像填充文章的高度，这只是将它们都对齐到容器的顶部。
是的，这样做会根据要求解决问题。

【解决方案2】：

这是图像的默认行为。字母下降/图像与文本基线对齐的图像下方大约有 2px 的间隙。这是因为默认情况下图像是内联的。

一种快速解决方法是将图像更改为 display:block;。另一种解决方案是使用vertical-align: bottom;，如这篇简单的文章所示：http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html

例子：

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

img {max-width:100%; vertical-align:bottom;}

【讨论】：

【解决方案3】：

假设您确实希望图像具有height: 100% 和width: 33%，以下将做到这一点：

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

@media screen and (min-width: 40em) {
  .article-img { 
    width: 33%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  }
  .article-img img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .article-details {
      float: right;
      width: 60%;
  }
}

【讨论】：