css - 如何使浮动的 img 与其父级具有相同的高度？

Question

我有一个页脚 div，其中包含一些版权文本和一个小徽标。我想将徽标高度设置为与包含它的 div 相同的高度。

显而易见的解决方案是height: 100%，但这似乎只是使图片出现在其正常高度。

相关的CSS：

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
}

footer img {
  float:right;
  height:100%;
}

score 1 · Accepted Answer

在里面添加一个绝对位置的div来容纳img

<footer>
     <p>Details here</p><p>More details here.</p>
     <div class="new_class"><img src="images/circle_logo.png" alt="GriffMUN 2014" title="GriffMUN 2014"></div>
    </footer>

css

footer {
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  text-align: right;
  margin: 0 auto;
  background-color: #000000;
  font-size: small;
  float: center;
  position:relative;
}

footer img {
  float:right;
  height:100%;
}
.new_class {
    position:absolute;
    right:50px;
    top:0;
    height:100%;
    }

根据需要调整 div 位置以查看<p>标签

score 0 · Accepted Answer

If the footer is a set height, height: inherit; should do the trick. If the footer's height is dynamic (ie a percentage rather than a set number) you can use jQuery to match its height to the footer's height, like so:

$('footer img').height( $('footer').height() + 'px');

This is assuming of course that your img element is contained in a footer element. Hope that helps!

css - 如何使浮动的 img 与其父级具有相同的高度？

2 回答 2

Related

Reference