固定大小的 div 中带有文本标题的图像答案

【问题标题】：Image with text caption in a fixed-sized div固定大小的 div 中带有文本标题的图像
【发布时间】：2015-11-04 09:48:58
【问题描述】：

我遇到了一个 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);

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
我尝试了很多 CSS/HTML 组合来做到这一点，这是我最好的结果。没有很多代码要写，我认为这是一个简单的 CSS 解决方案，但我不是网络开发人员，即使使用谷歌搜索，我也没有找到任何解决方案。
如果你 edit 你的问题包括你的代码，那将是最有帮助的。
我的代码只设置了主div的宽度和高度，文本div的宽度和文本对齐以及img的最大宽度和最大高度，正如我们在HTML结构中看到的那样。但如果有帮助，我会添加这些代码行。

标签： javascript jquery html css image

【解决方案1】：

首先确保父 div 没有任何 'overflow: hidden' 属性。

设置内部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

【讨论】：

正如我在第一次编辑中所说，我使用 javascript 动态添加这些元素，所以当我设置大小时，div 和图像还没有在 DOM 中（所以我无法获取文本 div 大小计算 img 大小）。

【解决方案2】：

将min-height 用于您的父母div 而不是height。

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

【讨论】：

感谢您的回答。但我不能这样做，因为我的 div 需要有这个大小，而不是更大。

【解决方案3】：

感谢 Antony 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";
    }
});

效果很好。谢谢安东尼。

【讨论】：