图像超出行高

Question

您好，我有一个问题，在插入图像。Image height超出了其父对象的行高。

<div class="contact">
        <div class="col-md-1">
            <div class="col-md-12">
                <img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjk0sG6ibLKAhWEcI4KHYsMDTkQjB0IBg&url=http%3A%2F%2Flogos.wikia.com%2Fwiki%2FFile%3ALogo_pln.jpg&psig=AFQjCNHf9civftbBawMR-5hGhERmmUzQBA&ust=1453162264247391" class="img-contact">
            </div>
        </div>
    </div>

    <div class="footer shadow" align="center">
        &copy; Copyright 2015 UPT SULSELRABAR
    </div>

和下面的CSS：

.contact{
padding:20px;
background-color:White;
height:;
}

.img-contact{
width:100%;
}

.footer{
position:bottom;
background-color:grey;
padding:20px 10px;
font-weight:bold;
}

.footer.shadow{
box-shadow: inset 0px 8px 6px -4px DimGray;
-webkit-box-shadow: inset 0px 8px 6px -4px DimGray;
-moz-box-shadow: inset 0px 8px 6px -4px DimGray;
-o-box-shadow: inset 0px 8px 6px -4px DimGray;
}

如何根据子项高度自动调整行高

Answer 1

您的代码中缺少一些不必要的CSS/HTML，因此我提供了一个使用最少的CSS/HTML来实现此效果的工作演示

​

.contact {
  padding: 20px;
  background-color: White;
  height: 100px;
}
.img-contact {
  height: 100%;
  width: auto;
}

<div class="contact">
  <img src="http://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Logo_pln.jpg" class="img-contact">
</div>

​

只需将.contact { }中的高度调整为您想要的高度即可。子元素(.img-contact)被设置为height: 100%，这将使其扩展/收缩到父元素的高度，而width: auto将保持图像的纵横比。

Answer 2

引导列类应该只是.row元素的直接子元素。在这里查看Bootstrap的网格文档：http://getbootstrap.com/css/#grid

修复html以包含行元素应确保行的高度扩展以适应子列的高度。您还需要修复无效的css。

以下是我认为您正在尝试实现的示例：

<div class="contact">
  <div class="row"><!-- row element -->
    <div class="col-md-12"><!-- column element, child of row -->
      <img src="#">
    </div>
  </div>
</div>