图像超出行高

Question

您好我在插入图片时遇到问题。图像高度超过其父级的行高。

<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，因此我提供了使用最小值来实现此效果的工作演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

只需将.contact { }中的高度调整到您想要的任何高度即可。子元素（.img-contact）设置为height: 100%，这将使其扩展/收缩到父元素的高度，而width: auto则用于维护图像＆＃39}。宽高比。

Answer 2

Bootstrap列类应该只是.row元素的直接子元素。在此处查看Bootstrap的网格文档：

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