根据div中的内容调整图像大小
根据div中的内容调整图像大小
提问于 2021-07-14 14:18:28
我有一个带有另外两个元素的父div，一个包含文本内容，另一个可能包含图片。图片和文本的大小/长度可能不同。我希望父div根据内容增长，但只增长到一定的高度。如果有图像，我希望图像放大或缩小以使父div达到最大高度。如果没有图像，我希望父div缩小以包含文本。镜像将通过JavaScript添加。我已经在下面的图片中说明了我想要做的事情。
我原本希望下面的代码能正常工作，但图像似乎扩展到比父div更大。我已经尝试了其他一些方法，但我似乎不能让它工作。
Here是一名codepen。
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}任何帮助都将不胜感激，提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-14 14:44:18
在下面的代码片段中，如果图像在那里，我使用jQuery height通过计算#parent内部的剩余空间来动态分配它的高度。(200高)。因此，无论内容是什么，图像的高度都会基于此而增加或减少。
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68372972
复制相关文章
相似问题
腾讯云开发者
