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

【问题标题】：How do I make a floated img have the same height as its parent?如何使浮动的 img 与其父级具有相同的高度？
【发布时间】：2013-08-25 20:10:48
【问题描述】：

我有一个页脚 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%;
}

【问题讨论】：

我相信它应该可以工作。 jsfiddle.net/AEFhV
发布一些css和html。我不会将height: 100% 称为显而易见的解决方案——它不像人们想象的那样起作用。我会考虑将图像设置为 div 的背景是更明显的解决方案。
@Itay 之所以有效，是因为 div 已被赋予特定的高度。
@AndyG 好吧，他没有提到包装器的高度不固定:)
@Itay，AndyG 是对的。我想要一个不固定的高度。

标签： css image html css-float

【解决方案1】：

在里面添加一个绝对位置的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> 标签

【讨论】：

部分有效；但它最终以图片覆盖我的文字，这不太有用。
它在 Chrome 中不起作用。徽标最终脱离了页面。
调整'right:50px;' '.new_class' 的属性，在我的 chrome 版本中运行良好。（版本 29.0）

【解决方案2】：

如果页脚是设定的高度，height: inherit; 应该可以解决问题。如果页脚的高度是动态的（即百分比而不是设定的数字），您可以使用 jQuery 将其高度与页脚的高度相匹配，如下所示：

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

这当然是假设您的 img 元素包含在页脚元素中。希望对您有所帮助！

【讨论】：

我正在使用页脚，但我需要坚持使用 html 和 css。