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

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

Answer 1

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

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

请参阅： http://jsfiddle.net/ry7jLfm9/2/

请告诉我你的具体情况。

干杯

Answer 2

假设您确实希望图片包含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%;
  }
}

Answer 3

这是图像的默认行为。图像下方的字母下降/图像与文本基线对齐的间隙约为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;}

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

3 个答案: