Bootstrap 4 фиксированная высота изображения

Question

Я использую систему координат Bootstrap с 4 сетками для отображения изображения произвольного размера из unspla sh .com на веб-странице.

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

Вот пример:

Существует ли какой-либо bootstrap специфицированный c класс, который я могу применить, чтобы иметь ту же высоту изображения а также вписать его в родительский div?

Answer 1

Я использую трюк с отступом , чтобы дать мне соотношение сторон изображения, и тогда я могу абсолютно точно расположить изображение внутри якоря и использовать подгонка объекта на нем (может потребоваться полифилл для ie):

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');

/* use classes instead of these element selectors */

a {
  display: block;
  padding-top: 56.25%;
  position: relative;
}

a>img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

Одним из решений было бы установить высоту для img-thumbnail, а затем присвоить ей объектную посадку:

<style>
.img-thumbnail {
  height: 350px;
  object-fit: cover;
}