Html 图像超过行高

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

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

.联系方式{ 填充：20px； 背景色：白色； 高度：100px； } .img联系人{ 身高：100%； 宽度：自动； }

---

引导列类只能是.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>

---

您发布的CSS无效。高度：；-少了一些东西。

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