Как настроить чувствительную высоту изображения до 100%?

Question

я следующий HTML:

<article class="post clearfix"> 
    <div class="post-img"> 
     <img src="path/to/img"/> 
    </div> 
    <div class="post-details"> 
     [content] 
    </div> 
</article> 

И следующий CSS:

img { 
    max-width: 100%; 
    height: auto; 
} 
.post-img { 
    float: left; 
    width: 33.33%; 
    margin-right: 1.5em; 
    overflow: hidden; 
} 

Я хочу div.post-Img быть 100% высокими, как его родительской статья, а также для IMG внутри него тоже будет на 100%. (Это нормально, если часть изображения обрезана с левой или с правой стороны.)

Высота статьи неизвестна, поэтому я не могу ее жестко закодировать.

Заранее благодарен!

Answer 1

вы можете использовать этот класс:

.full-height{ 
    height:100vh; /* 100% vertical hieght */ 

}

, например;

<img class="full-height" alt="" src="test.png" /> 

этот лучший способ для отображения изображения полной высоты.

Answer 2

Используйте background-image, чтобы установить изображение и background-size: 100% auto в фоновое изображение.

Answer 3

Вот вариант, чтобы сделать это http://jsfiddle.net/237u55q1/1/

.post{ 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    overflow: hidden; 
} 
.post-img { 
    display: table-cell; 
    width: 33.33%; 
    margin-right: 1.5em; 
    overflow: hidden; 
    vertical-align: top; 
    position: relative; 
} 
.post-img img{ 
    width: 100%; 
    height: auto; 
    position: absolute; 
} 
.post-details{ 
    display: table-cell; 
    vertical-align: top; 
    width: 66.66%; 
} 

Добавить или удалить содержимое, чтобы увидеть изображение принятия на высоте :)