Question

我正在使用bootstrap 2，我的页面左侧有一个导航范围。该范围包含用户列表。我想在用户信息（用户名，名字和姓氏）旁边放置用户头像的缩略图

<div class="container">  
    <div class="row-fluid">   
        <div class="span3">
           <div class="row-fluid">
                <div class="span3">
                  <img class="img-rounded" width="75" height="75" src="http://placehold.it/400x200"/>
                </div>
                <div class="span9">
                  <div class="strong">bbthornton</div>
                  <div class="muted">Billy Bob Thornton</div>
                </div>
          </div>
          <div class="row-fluid">
                <div class="span3">
                  <img class="img-rounded" width="75" height="75" src="http://placehold.it/200x400"/>
                </div>
                <div class="span9">
                  <div class="strong">mtyson</div>
                  <div class="muted">Mike Tyson</div>
                </div>
          </div>
        </div>
    <div>
    <div class="span9">
       Other Content
    </div>
</div>

我点击以获取用户头像的服务器不会强制用户头像为方形。有没有办法让我可以强制这些图像是正方形并说75x75？

这是一个小提琴： http://jsfiddle.net/newmanw/htbu7sno/1/

还想知道你是否能以某种方式不会失去原始宽高比。这也需要一种作物。不知道你能用css做多少钱。拇指很小，如果我不保持纵横比，它可能看起来不太糟糕。

Answer 1

控制图像＆＃39;通过CSS大小。如您所见：http://jsfiddle.net/htbu7sno/4/

我在image元素中添加了一个类：avatar，并在那里设置宽度和高度：

.avatar{
     width: 75px;
     height: 75px;
}

这会调整图像大小，但不会保持宽高比。

如果你想保持宽高比，你可以随时用容器包围img标签，调整容器大小并将overflow属性设置为＆＃34; hidden＆＃34;，如下所示：

http://jsfiddle.net/htbu7sno/6/

HTML：

<div class="img-container">
              <img class="img-rounded"  src="http://placehold.it/400x200"/>
</div>

CSS：

.img-container{
width: 75px;
height: 75px;
overflow: hidden;
border-radius: 5px;
}

无论哪种方式都有其优点和缺点。第一个实例不会保持纵横比，但第二个（如第二个jsFiddle中所见）可能会使图像小于容器。

Answer 2

使用最大宽度来保持宽高比。

<强> Here is the jsFiddle

  <div class="img-container">
    <img class="img-rounded"  src="http://placehold.it/400x200"/>
  </div>

.img-container {
    height: 75px;
    width: 75px;
    overflow: hidden;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.img-container img.img-rounded {
    min-width: 75px;
    max-width: 75px;
}

注意：如果您想解决同时解析最小高度和宽度的纵横比的问题，单独使用css将无法解决此问题。

强制img在bootstrap 2中是精确的高度/宽度

2 个答案: