Question

我有几个Bootstrap 3缩略图。我希望它们的大小相同，所以我已经修正了它们的高度和宽度。它们将显示不同尺寸和比例的不同图像，我希望它们在垂直和水平方向上居中。当图像太大而无法容纳在其容器内时，我希望它可以缩小。

我在this handy post中使用transform: translate(-50%, -50%);找到了部分解决方案，但它不适用于平板电脑或jsfiddle等网站。事实上，固定高度也不起作用。我试图找出一个良好的跨浏览器兼容性。

jsfiddle link

＆＃13;

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}

img
{
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

    <div class="row">
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
    <div class="thumbnail">
      <img src="http://animalia-life.com/data_images/mammal/mammal4.jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
  </div>

＆＃13;

有什么想法吗？

Answer 1

首先你的css正在改变每个图像，而不仅仅是缩略图中的图像，这不是一个好习惯。但是我用你当前的代码来得出答案。

.thumbnail img { height:100px; width:100%;}

您需要将宽度定义为100％并为其指定特定高度。然后，您需要为图像添加响应。添加img-responsive类。您还需要居中图像和引导程序3为您执行以下操作：center-block

<img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">

jsfiddle

要使缩略图保持相同的高度：helpful Link

Jsfiddle - 2

   <div class="row">
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
     <div class="thumbnail">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
       <div class="caption">
         <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
         <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
  </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image" class="img-responsive center-block">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

  </div>

你的css：

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}
.thumbnail img { height:100px; width:100%;}

Bootstrap 3缩略图：垂直和水平居中的图像

1 个答案:

jsfiddle

Jsfiddle - 2