如何將響應圖像高度設置爲100％？

我有以下HTML：如何將響應圖像高度設置爲100％？

<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％高。（如果某些圖像從左側或右側剪下，則可以。）

文章的高度未知，因此我無法對其進行硬編碼。

在此先感謝！

來源

2014-10-03 Brian O' Neill

你爲什麼不只是增加高度：100％？ – 2014-10-03 15:32:42

我試過了......它不起作用。（假設你的意思是將高度：100％添加到包含div的.post-img中。是否需要將樣式應用於父項（文章）以使其有效？ – 2014-10-03 15:35:07

你可以使用這個類：

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

}

例如;

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

這是顯示全高度圖像的最佳方式。

來源

2014-10-03 15:35:18

您是在暗示「高度：100％」還是「設置'高度'明確嗎？即圖像是400px高，'高度：400px;'。 – hungerstar 2014-10-03 15:37:36

http://caniuse.com/#search=viewport尚未完全採用，但仍然是未來web開發的一個很好的解決方案 – Phlume 2014-10-03 15:49:40

使用background-image設置圖像和background-size: 100% auto爲背景圖像大小。

來源

2014-10-03 15:35:49 monkeyinsight

這裏是一個選項來做到這一點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%; 
}

添加或刪除的內容看圖像採取新的高度:)

來源

2014-10-03 15:55:03

您也可以通過使用'width：auto; height：100％'來縮放圖像，使其適合高度，如果要裁剪圖像，則可以選擇使用'right：0'曝光圖像的右側，很好的答案！ – 2014-10-03 16:13:20

如何將響應圖像高度設置爲100％？

回答

相關問題