Question

我遇到这种情况：我想让IMG高度与其未设置高度的父DIV相适应。这是示例代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何使img高度适合box_NewsPreview类的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，所以无论什么它总是伸展到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);
});

Here is a fiddle

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

2 个答案: