Question

我有一个图片，＆＃39; img.icon-avatar设置在一些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;
}

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

1 个答案: