我有这种情况:我想使 IMG 高度适合其未设置高度的父 DIV。这是示例代码:
.box_NewsList {
width: 100%;
background: #ffa;
overflow: hidden;
display: inline-block;
}
.box_NewsList>img {
height: 100%;
display: inline-block;
}
.box_NewsPreview {
padding: 15px;
width: auto;
}
.box_NewsPreview>.tit_News {
font-size: 1.5rem;
line-height: 1.5rem;
position: relative;
margin: -15px 0 15px;
padding: 15px 0 0;
background: transparent url(../imgs/main_menu_hover.png) no-repeat top left;
}
<div class="box_NewsList">
<img class="pull-left" src="mypicture.jpg">
<div class="box_NewsPreview">
<h1 class="tit_News">MyTitle</h1>
<div class="txt_Abstract">
<p>Long text abstract here</p>
</div>
<button class="btn btn-default btn-rounded pull-right">READ</button>
</div>
<div class="clear"></div>
</div>
如何使用 box_NewsPreview
类使 img 高度适合 div 的高度?
.box_NewsPreview>.txt_Abstract p{color:#7e7e7e;font-family:Roboto, sans-serif;font-size:1rem;font-weight:300;text-align:justify;}
如果我在 box_NewsList
中添加一个高度值,例如 height:300px;
,它工作正常。
如果我设置了 height:auto
、height:initial
、height:inherit
或者我没有在该类中添加任何高度值然后我得到完整尺寸的 IMG,而不是调整其父高度的大小。
最佳答案
我认为实现您想要的东西的最简单方法是使用一点 jQuery。我认为使用纯 CSS 是不可能的
我举了一个例子,我在 .box_NewsList
上设置了 position: relative;
,在 .box_NewsList 上设置了
position: absolute;
>img
还有这个循环遍历图像并为文本填充的小脚本:
$('.box_NewsList').each(function() {
var imageWidth = $(this).find('img').width();
$(this).find('.box_NewsPreview').css('padding-left', imageWidth + 15);
});
关于html - 如何在未设置高度的父 DIV 中适应 IMAGE?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39451573/