宽度为 100% 的 HTML img，并裁剪为父元素的高度，这不是固定的

Question

我有一个图像，'img '。在某些html中设置图标头像:http://jsbin.com/moqagu/5/edit?html,css,output

我怎么能强迫图像是100%的宽度(就像现在一样)，但剪裁到它的父元素的高度，所以(在这个例子中)它不推下一个面板，并尊重或包括填充?

html:

<div class="row">
    <div class="col-xs-3">
      <div class="icon-avatar">
        <img class="icon-avatar img-rounded" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="avatar"/>
      </div>
    </div>
    <div class="col-xs-9">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">
            Title
          </h3>
        </div>
        <div class="panel-body">
            Content
        </div>
      </div> <!--panel -->
    </div>
  </div> <!-- row -->

css:

div.icon-avatar {
  ?
}
img.icon-avatar {
  width:100%;
  ?
}

请注意，父元素的高度不是固定的，并且将基于页面上的其他元素，所以我需要父元素在确定其自身高度时忽略图像。

Answer 1

like:

div.icon-avatar {
  text-align: center
}
img.icon-avatar {
  width:auto;
  max-height:90px;
}