Как сделать .card-img-top Bootstrap равной по высоте при адаптивной ширине? - PullRequest
Новая
       40

Как сделать .card-img-top Bootstrap равной по высоте при адаптивной ширине?

0 голосов
/ 18 октября 2018

Я представляю серию карт Bootstrap 4, подобных этой ... 

<div class="row">

  <!-- column -->
  <div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2">
      <!-- card -->
      <div class="card rounded-0 w-100 bg-white">
          <a href="http://www.example.com/destination.html">
            <img src="http://www.www.example.com/images/photo.jpg" class="card-img-top img-responsive w-100">
          </a>
          <div class="card-body">
            <h6 class="card-title">Bookish Blaenavon opens new chapter</h6>
          </div>
      </div>
      <!-- end card -->
  </div>
  <!-- end column -->

  <! -- more of the same cards here +++ -->

</div>

Все изображения могут иметь неодинаковые размеры, но, благодаря их классу .card-img-top, должны иметь одинаковый размер.

Ширина:

К вашему сведению - для решения ширины я уже добавил .w-100 к .card, а также к img, хотя я думаю, что последнееможет быть излишним.

Кроме того, моя таблица стилей применяется object-fit: cover; к .card-img-top.

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

Высота карты:

К вашему сведению - чтобы заставить карты равной высоты, несмотря на длину их содержимого, вы видите, что я применяюd-flex align-items-stretch в столбце.Снова, счастлив.

Высота изображения:

Моя проблема лежит здесь, однако.

Для решения этой проблемы у меня естьприменил атрибут height CSS к .card-img-top ... 

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    height: 11vw;
    object-fit: cover;
}

Проблема в том, что при любой ширине браузера img остается одинаковой высоты.Например, это выглядит глупо коротко на sm.Посмотрите этот анимированный пример ...

enter image description here

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

Есть ли способ сделать это, используя материал Bootstrap 4, вместо того, чтобы писать код медиа-запроса для репликации той же ширины, что и он?

делаю для уменьшения ширины против результата для высоты?

1 Ответ

0 голосов
/ 18 октября 2018

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

.card-img-top {
    max-height: 200px;
    min-height: 150px;
    object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <!-- column -->
  <div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2">
      <!-- card -->
      <div class="card rounded-0 w-100 bg-white">
          <a href="http://www.example.com/destination.html">
            <img src="https://via.placeholder.com/350x150" class="card-img-top img-responsive w-100">
          </a>
          <div class="card-body">
            <h6 class="card-title">Bookish Blaenavon opens new chapter</h6>
          </div>
      </div>
      <!-- end card -->
  </div>
  <!-- end column -->

  <! -- more of the same cards here +++ -->

</div>

Вам также не нужно устанавливать класс .w-100 на изображении, поскольку .card-img-top устанавливает ширину на 100% содержащего его элемента.

...