Как сделать отзывчивое изображение занимающим 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% от высоты статьи. Однако, как вы можете видеть в этой скрипке, всегда есть небольшой промежуток между нижней частью изображения и нижней частью изделия: http://jsfiddle.net/u7yr8cv1/

Почему это происходит и как я могу исправить? Спасибо!

Answer 1

Это поведение по умолчанию изображения. Существует около 2px пробел под изображением для буквенных descenders/линий изображения с базовым текстом текста. Это связано с тем, что изображение встроено по умолчанию.

Одним быстрым решением является изменение изображения на 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;} 

Answer 2

Его проблема с вертикальным выравниванием. изменить свой CSS следующим образом:

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

См: http://jsfiddle.net/ry7jLfm9/2/

Позвольте мне знать, как это происходит для вас.

Приветствия

Answer 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%; 
    } 
}