圖像在一個固定大小的div

我面對一個CSS/HTML問題文本標題，圖像在一個固定大小的div

我有一個固定大小的div，我想有一個文本（在頂部或底部的圖像）和裏面的圖像。

必須尊重圖像比例，並且事先不知道圖像的寬度和高度。

我已經嘗試了很多東西，我得到的最好的結果是一個文本，我的圖像保存比例，但圖像被裁剪。

這裏是我的問題的說明：

HTML結構：

的主要事業部：

包含文本的DIV：

img元素（我們可以看到，圖像被裁剪）：

圖像被裁剪，因爲它需要的父div的寬度，但文本格也被包含父div，所以它需要一些地方...

編輯：只是爲了精確的東西：我用javascript動態添加這些元素，所以當我設置大小，div和圖像還沒有在DOM（所以我可以沒有獲得文本div大小來計算img大小）。

解決方案是什麼？

謝謝:)

編輯2：

我想要什麼：

編輯3：javascript代碼，其產生的股利：

this.m_cellElem = document.createElement('div'); 
    this.m_cellElem.style.width = width + "px"; 
    this.m_cellElem.style.height = height + "px"; 

    var text = document.createElement('div'); 
    text.style.width = width + "px"; 
    text.style.textAlign = "center"; 
    text.innerHTML = this.m_name; 

    this.m_imgElem = document.createElement('img'); 
    this.m_imgElem.id = "viewImg-" + this.m_viewUniqueId; 
    this.m_imgElem.setAttribute('src', 'data:image/png;base64,' + this.m_poster); 
    this.m_imgElem.style.maxWidth = "100%"; 
    this.m_imgElem.style.maxHeight = "100%"; 

    this.m_cellElem.appendChild(text); 
    this.m_cellElem.appendChild(this.m_imgElem);

來源

2015-11-04 Slot

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

我試了很多CSS/HTML組合來做到這一點，這是我最好的結果。沒有太多的代碼要寫，我認爲它是一個簡單的CSS解決方案，但我不是一個Web開發人員，即使使用谷歌搜索，我也沒有找到任何解決方案。 – Slot

如果你[編輯]你的問題包括你的代碼，這將是最有幫助的。 –

最後的作品得益於安東尼SUTHAKAR J.

我剛剛適應了這樣的代碼：

$('body').on('DOMNodeInserted', '.container', function(e) { 
var mainDivs = e.target.getElementsByClassName("mainDiv"); 

    for (var i = 0; i < mainDivs.length; i++) { 
     var mainDiv = mainDivs[i]; 
     var img = view.getElementsByClassName("img")[0]; 
     var text = view.getElementsByClassName("textDiv")[0]; 
     var imgHeight = $(view).height() - $(text).height(); 
     img.style.maxHeight = imgHeight + "px"; 
    } 
});

工作得很好。謝謝安東尼。

來源

2015-11-04 14:42:22 Slot

使用min-height爲您的父母div而不是height。

<div style="width:276px;min-height:58px;">

來源

2015-11-04 10:01:55

感謝您的回答。但我不能這樣做，因爲我的div需要具有這個大小，而不是更大。 – Slot

首先確保父div沒有任何'overflow：hidden'屬性。

設置內的div風格

display: inline-block; 
width: 100%; 
text-align: center;

和圖像最大高度不應該是100％; 它應該是'父div高度 - 文本div高度'。例如，考慮父DIV高度100像素，文本DIV高度30像素，則影像風格應該是

display: inline-block; 
max-width: 100%; 
max-height: 70px;

試試這個，希望這將工作！

Editted

按照這個工作環節，我希望這是你期待什麼。 jsfiddle

來源

2015-11-04 10:25:33

正如我在第一次編輯中所說的，我使用javascript動態添加了這些元素，所以當我設置大小時，div和圖像尚未存在於DOM中（因此我無法獲得文本div大小來計算img大小）。 – Slot

圖像在一個固定大小的div

回答

相關問題