Миниатюра Bootstrap 3: вертикальное и горизонтальное центрированное изображение

Question

У меня есть несколько миниатюр Bootstrap 3. Я хочу, чтобы они были одинакового размера, поэтому я установил их высоту и ширину. Они будут показывать разные изображения с разными размерами и пропорциями, и я хочу, чтобы они центрировались как по вертикали, так и по горизонтали. Когда изображение слишком велико, чтобы поместиться в его контейнере, я бы хотел уменьшить его.

Я нашел частичное решение, используя transform: translate(-50%, -50%); в этом удобном посте, но он не работает ни для планшетов, ни для сайтов типа jsfiddle. На самом деле, фиксированная высота там тоже не работает. Я пытаюсь выяснить хорошую кросс-браузерную совместимость.

ссылка jsfiddle

@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;
}

    <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>

Есть идеи?

Answer 1

Во-первых, ваш CSS меняет каждое изображение, а не только то, что на миниатюре, что не является хорошей практикой. Но я использовал ваш текущий код, чтобы придумать ответ.

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

Вам нужно определить ширину до 100% и дать ей конкретную высоту. Затем вам нужно добавить отзывчивость к вашим изображениям. Добавьте img-отзывчивый класс. Вам также нужно отцентрировать изображение, и загрузчик 3 сделает это за вас с помощью класса: center-block

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

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%;}