如何在未设置高度的父DIV中安装IMG？

Question

我有这种情况：我想使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而不是调整其父高度的大小。

Answer 1

尝试

<div class="box_NewsList">
   <div class="box_NewsPreview">
   <img class="pull-left" src="mypicture.jpg" stretch="fill">
      <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>

看来<img>在news_list而不是news_preview中。
我在img中添加了Stretch，所以无论它总是拉伸到div的大小都是一样的:)

Answer 2

我认为实现您想要的最简单的方法是使用一些jQuery。 我认为纯CSS不可能

我举了一个例子，说明我的position: relative; 在.box_NewsList和position: absolute; 在.box_NewsList>img

和这个小脚本循环遍历图像并为文本提供填充：

$('.box_NewsList').each(function() {
    var imageWidth = $(this).find('img').width();
  $(this).find('.box_NewsPreview').css('padding-left', imageWidth + 15);
});

这是一个小提琴