javascript - 在固定大小的 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%；它应该是'parent div height - the text div height'。例如，考虑父 div 高度 100px 和文本 div 高度 30px 那么图像样式应该是

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

试试这个，希望它能成功!!!

已编辑

点击此工作链接，希望这是您所期待的。 jsfiddle