图像在一个固定大小的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

回答

相关问题