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

Answer 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%;
    }

根据您需要查看<p>标记

来调整div位置

Answer 2

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

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

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

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

2 个答案: