用填充100％高度的文字的css圖像

如何解決這個問題：我有一個高度爲100％的div。在這個div中，我想放置一個圖像，並在其下面添加幾行文本（動態數量的文本）。我如何確保圖像被拉伸以完全填充文本留下的空間？用填充100％高度的文字的css圖像

感謝，Wienel

2013-10-21 Wienel

你應該知道，'100％'並不意味着'100％'..它只是'100 ％'的父母。如果父項爲0，那麼0的「100％」爲0 ...確保父項也是「100％」。 –

你可以展示你已經在小提琴中有什麼？ – ShadowCat7

嘗試設置圖像的高度。 –

是一樣的東西this jsfiddle你在找什麼？我使用了display: table和display: table-row，儘管這不是真正的表格，但是表格顯示對於這類事情來說非常棒。

2013-10-21 19:06:56 ShadowCat7

是的，效果很好。下一個問題是要找出如何將圖像的寬度與圖像一起展開： http://jsfiddle.net/pv64A/ – Wienel

添加'#img {width：100％; }'和'#container {width：（some amount）px; }，如[這個小提琴]所見（http://jsfiddle.net/pv64A/1/）。 – ShadowCat7

你的父母div有100％的寬度，這意味着任何父母的100％。如果你想要你的圖像顯示100％的問題，給它一個類。

.imgClass { 寬度：100％ }

一般來說你可能不想扭曲你的形象是，如果你的文本是動態的，會發生什麼。

2013-10-21 19:09:10

我怎樣才能確保圖像被拉伸到完全填充文本留下的空間？

你還沒有顯示你的html結構，這使得它很難回答。

但是你必須創建一個圖像和一個段的div。您需要將圖像寬度設置爲100％

<div class="structure"> 
     <img class="imagefullsize" /> 
     <p class="textunderimage">Text here</p> 
    </div> 
</div>

的CSS：

.imagefullsize{ 
    height: 100%; 
    width: 100%; 
} 

.textunderimage{ 
    display: block; 
}

2013-10-21 19:10:35

回答