固定大小的div中帶有文字標題的圖像

Question

我正面臨CSS / HTML問題，

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

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

我已經嘗試了很多事情，並且得到的最好結果是文本，圖像的比例保持不變，但是圖像被裁剪了。

這是我的問題的說明：

HTML結構：

主要部門：

包含文本的div：

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

圖像被裁剪是因為它占據了父div的寬度，但是文本div也包含在父div中，因此它占據了一些位置。

編輯：只是為了精確一些：我使用javascript動態添加了這些元素，所以當我設置大小時，div和圖像尚未在DOM中（因此我無法獲取文本div的大小來計算img的大小）。

解決辦法是什么 ？

謝謝 ：）

編輯2：

我想要的是：

編輯3：生成div的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);

Answer 1

首先，確保父div沒有任何“溢出：隱藏”屬性。

設置內部div樣式

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

圖像最大高度不應為100％； 它應該是“父div高度-文本div高度”。 例如，假設父div高度為100px，文本div高度為30px，則圖像樣式應為

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

試試這個，希望它能起作用！

已編輯

按照此工作鏈接，希望這就是您的期望。 jsfiddle

Answer 2

將min-height用作父div而不是height 。

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

Answer 3

最后工作歸功於Antony SUTHAKARJ。

我只是像這樣修改他的代碼：

$('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";
    }
});

效果很好。 謝謝安東尼。