Как получить изображения на карте Bootstrap одинаковой высоты/ширины?

Итак, вот мой код, он отображает 6 карточек, три поперек и две строки. Я хотел бы, чтобы все изображения были одинакового размера без необходимости вручную изменять размеры изображений. Отзывчивость работает, я использую img-Fluid в качестве класса, и когда я захожу в мобильный или меньший браузер, все они имеют одинаковую ширину, но высота все еще отключена.

<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
      <div class="card-block">
        <h4 class="card-title">Brownie Delight</h4>

        <p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
      <div class="card-block">
        <h4 class="card-title">Butter Pecan</h4>

        <p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
      <div class="card-block">
        <h4 class="card-title">Black Cherry</h4>

        <p class="card-text">Our classic vanilla loaded with plump black cherries to give flavor and color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
      <div class="card-block">
        <h4 class="card-title">Mint Chip</h4>

        <p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
      <div class="card-block">
        <h4 class="card-title">Pistachio</h4>

        <p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
      <div class="card-block">
        <h4 class="card-title">More Flavors</h4>

        <p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
      </div>
    </div>
  </div>
</div>

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

Ответ 1

Попробуйте это в своем css:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

Отрегулируйте высоту vw по своему усмотрению. Покрытие объекта: покрытие позволяет масштабировать, а не растягивать изображение.

Ответ 2

это известная проблема

Я думаю, что обходной путь должен быть установлен как

.card-img-top {
    width: 100%;
}

Ответ 3

.card-img-top {
    height: 15rem;
    object-fit: cover;
}

Ответ 4

.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

Как показано выше, но когда вы добавляете высоту, я предлагаю использовать "vh" (единицы измерения высоты окна просмотра) для более удобной работы с мобильными устройствами.

Ответ 5

Я не верю, что вы можете не обрезать их, я имею в виду, что вы можете сделать divs одинаковой высоты, используя jquery, но это не сделает изображения одинакового размера.

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

http://masonry.desandro.com/

Ответ 6

Я использовал "вручную", используя те же точки останова в Bootstrap 4, что и медиа-запросы...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

Это работает, хотя я бы хотел, чтобы такого рода реакция была более родной.

Частичное предложение от @sepuckett86 и I.

Ответ 7

Каждое из изображений должно быть точными размерами, прежде чем вы установите их, иначе bootstrap 4 попытается поместить их в напуганную фигуру. У Bootstrap также есть что-то вроде масонства на своих документах, которые вы можете использовать, если нужно, вы можете увидеть это здесь, http://v4-alpha.getbootstrap.com/components/card/#columns.