css - 100% 宽度的 html img，并剪裁到父元素的高度，这是不固定的

Question

我有一张图片，'img.icon-avatar set in some 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

像那样:

div.icon-avatar {
  text-align: center
}

img.icon-avatar {
  width:auto;
  max-height:90px;
}