如何使浮動img具有與其父項相同的高度？

我有一個頁腳div包含一些版權文本和一個小徽標。我想將徽標高度設置爲與包含它的div相同的高度。如何使浮動img具有與其父項相同的高度？

明顯的解決方案是height: 100%，但這似乎使圖片顯示在其正常高度。

相關的html：

<footer> 
    <img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014"> 
    <p>Details here</p><p>More details here.</p> 
</footer>

相關CSS：

footer { 
    color: #ffffff; 
    padding: 10px 10px 10px 10px; 
    text-align: right; 
    margin: 0 auto; 
    background-color: #000000; 
    font-size: small; 
    float: center; 
} 

footer img { 
    float:right; 
    height:100%; 
}

來源

2013-08-25 dragonridingsorceress

我相信它應該工作。 http://jsfiddle.net/AEFhV/ – Itay

發佈一些CSS和HTML。我不會稱「高度：100％」這個顯而易見的解決方案 - 它並不像人們想象的那樣工作。我會考慮設置圖像作爲背景，更明顯的解決方案。 –

@Itay這是有效的，因爲div已被賦予特定的高度。 –

如果頁腳是一套高度，height: inherit;應該做的伎倆。如果頁腳的高度是動態的（即一個百分比，而不是一組數字），您可以使用jQuery的高度匹配到頁腳的高度，就像這樣：

$('footer img').height($('footer').height() + 'px');

這是假設，當然，你的IMG元素包含在頁腳元素中。希望有所幫助！

來源

2013-08-25 11:34:43 everydayghost

我正在使用頁腳，但我需要堅持html和css。 – dragonridingsorceress

加入絕對位置的DIV中，以適應IMG

<footer> 
    <p>Details here</p><p>More details here.</p> 
    <div class="new_class"><img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014"></div> 
    </footer>

CSS

footer { 
    color: #ffffff; 
    padding: 10px 10px 10px 10px; 
    text-align: right; 
    margin: 0 auto; 
    background-color: #000000; 
    font-size: small; 
    float: center; 
    position:relative; 
} 

footer img { 
    float:right; 
    height:100%; 
} 
.new_class { 
    position:absolute; 
    right:50px; 
    top:0; 
    height:100%; 
    }

調整DIV的位置你需要看<p>標籤

來源

2013-08-25 12:05:47

這部分工作;但最終會以覆蓋我的文字的圖片結束，這不太有用。 – dragonridingsorceress

而且它在Chrome中不起作用。該標誌最終脫離了頁面。 – dragonridingsorceress

調整'right：50px;' '.new_class'屬性，在我的Chrome版本中工作正常。（版本29.0） –

如何使浮動img具有與其父項相同的高度？

回答

相關問題