У вас есть миниатюры с разными размерами изображений Bootstrap

Мне понравится миниатюра с изображениями разных размеров и различного количества текста. Но я хочу, чтобы все они имели одинаковый размер. Пример с сайта Bootstrap.

Ниже приведен код, который у меня есть на данный момент, с демонстрацией на jsFiddle.

У меня размер разных изображений, так что это сломается. Возможно ли это с помощью Bootstrap?

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Fading a RGB LED on BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/322/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to control the color of an RGB LED using a BeagleBone Black and Python.</p>
        </div>
    </div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Measuring Light with a BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/316/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to connect a photoresistor to a BeagleBone Black. The tutorial can also be used for other resistive sensors such as FSRs or SoftPots.</p>
        </div>
    </div>
</div>

Ответы

Ответ 1

Вы можете достичь этого, указав размеры для своих контейнеров.

например, в вашем элементе контейнера (.thumbnail), задайте конкретные размеры, например:

.thumbnail{        
    width: 300px; 
    // or you could use percentage values for responsive layout
    // width : 100%;
    height: 500px;
    overflow: auto;
}

.thumbnail img{
    // your styles for the image
    width: 100%;
    height: auto;
    display: block;
}

и т.д. с другими элементами.

ОБРАЗЕЦ

Ответ 2

Вы можете выполнить это с помощью CSS в теге img.

img {
    width: 200px;
    height: 200px;
}

или inline для каждого тега img, такого как

<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">

Ответ 3

Вы должны настроить высоту этих столбцов. В примере у нас одинаковое количество текста, поэтому он имеет одну и ту же высоту для каждого div.

Ответ 4

Вот мое решение, надеюсь, что это поможет!

  <style type="text/css">
  .row{
    display: flex;
   flex-wrap: wrap;
  }
  .row>[class="col-sm-6 col-md-4"]{
    display: flex;
    flex-direction: column;
  }
</style>