Question

Этот css извлек адаптивный макет карт из Boostrap 4. Как я могу нанести object-fit: cover; на изображение карты и получить адаптивный макет из Bootstrap 4?

#imgUNcover {
  width: 285px;
  height: 145px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">

  <div class="card">

    <div class="img-container">

      <a href="index.php?post=<?php echo $UN['title']?>"><img src="<?php echo $UN['capa']?>" alt="<?php echo $UN['alt']?>" class="card-img-top" id="imgUNcover"></a>

    </div>

    <div class="card-body">

      <a href="index.php?post=<?php echo $UN['title']?>" class="card-title cardTitleLink">
        <h1 class="cardTitleUN">
          <?php echo $UN['title']?>
        </h1>
      </a>

      <p class="card-text text-muted">
        <?php echo $UN['text']?>
      </p>

      <a href="index.php?post=<?php echo $UN['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

    </div>

  </div>

</div>

Без object-fit: cover;:

С object-fit: cover;:

Я мог бы изменить width изображения на id #imgUNcover, но это не решит проблему на разных экранах результатов.

Edit:

Magnus · Answer 1 · 13 сентября 2018

Сьюзи, я собираюсь выйти здесь на конечность и просто угадать, что ты ищешь. Дайте мне знать, если вам нужен другой результат, и я уточню ответ

Чтобы изменить размер изображения с размером его содержащего блока , вы помещаете процентное значение в высоту или ширину. Ниже приведен пример кода.

Некоторые интересные заметки (если вы хотите погрузиться немного глубже):

Вам не нужно устанавливать высоту и ширину для элемента изображения
Это хорошая практика, но в этом нет необходимости
Причина в том, что вычисленное значение размера, которое не установлено, по умолчанию равно auto . Это, в свою очередь, приводит к используемому значению для этого свойства, равному: used value of other dimension / intrinsic image ratio
На практике это означает, что высота или ширина, которые вы не установили, будут смещены, так что поле элемента * будет иметь такой размер, что соотношение сторон поля содержимого было бы идентично внутреннему соотношению сторон изображения
В результате этого изменение object-fit не будет иметь никакого эффекта, за исключением случаев, когда вы установите его в none (none: изображение сохранит свои внутренние размеры, в то время как его поле содержимого останется что вы установили)
В этом случае мы хотим использовать% значения, чтобы включить изменение размера при изменении размера карты (отзывчивость)
Затем мы должны убедиться, что в блоке контейнера установлен этот конкретный размер
Если он не был установлен ( auto по умолчанию), его размер будет равен размеру его содержимого
Это может привести к неразрешимой циклической ссылке: ребенок хочет быть в процентах от размера своего родителя, а размер родителя пытается быть равным своему ребенку (ren)
В этом случае процентное значение, установленное в поле для содержимого , по умолчанию будет auto
Что означает, что он будет действовать, как будто он вообще не установлен
Если высота / ширина не задана, поле содержимого * Используемые значения высоты / ширины устанавливаются равными собственной высоте / ширине изображения
Таким образом, поле содержимого , скорее всего, будет большим (если изображение не маленьким), и переполнит его контейнер (см. overflow свойство)
Наконец, object-fit применяется только в том случае, если внутренние пропорции изображения отличаются от размеров (высоты / ширины), которые вы задали для поля содержимого элемента

Заключительные замечания:

Фуу, много заметок, но, надеюсь, это поможет вам объяснить, как работают высота / ширина встроенных заменяемых элементов
Спецификацию CSS2.1 для высоты / ширины различных элементов можно найти здесь: 10 Детали модели визуального форматирования
MDN артикул object-fit можно найти здесь: MDN object-fit

Код:

#imgUNcover {
  width: 100%;
  object-fit: contain;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
  <div class="card">
    <div class="img-container">
      <a href="#"><img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
    </div>
    <div class="card-body">
      <a href="#" class="card-title cardTitleLink">
        <h1 class="cardTitleUN">
          Some title
        </h1>
      </a>
      <p class="card-text text-muted">
        foo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foofoo foo
      </p>
      <a href="#">Continue Lendo</a>
    </div>
  </div>

</div>

Наконец, ручка, чтобы вы могли легко попробовать изменить размер браузера (чтобы убедиться, что он отзывчивый): https://codepen.io/magnusriga/pen/xazZzg?editors=1100

ОБНОВЛЕНИЕ (добавлена функциональность в соответствии с запросом в комментарии):

Чтобы убедиться, что все изображения имеют одинаковую высоту, вы устанавливаете определенную высоту на карточках, а затем распределяете ее по области изображения (верхняя часть) и части тела карточки, используя flexbox s flex-basis имущество. Чтобы избежать того, что flex-элементы растут вне их flex-контейнера , просто используйте overflow: auto, который говорит блоку добавить полосы прокрутки в случае необходимости.

Утомительная часть изменения функциональности Bootstrap заключается в том, что нужно проверить гораздо больше факторов, чем просто создавать их с нуля. И много раз вам приходится вводить !important, чтобы отвергнуть их дескрипторы.

Новый код:

.card {
  height: 400px;
}

.img-container {
  flex: 1 0 30% !important;
  // max-height: 30% !important; // <-- Alternative
  overflow: hidden;
}

.card-body {
  flex: 1 0 60% !important;
  // max-height: 60% !important; // <-- Alternative, though still need to control overflow
  overflow: auto;
}

#imgUNcover {
  width: 100%;
  height: 100%;
  object-position: 50% top;
  object-fit: cover;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
      <div class="card">
        <div class="img-container">
          <a href="#"><img src="https://qph.fs.quoracdn.net/main-qimg-fdaa32b9bffc30131e56956e4bc1e9e4.webp" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
        </div>
        <div class="card-body">
          <a href="#" class="card-title cardTitleLink">
            <h1 class="cardTitleUN">
              Some title
            </h1>
          </a>
          <p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
          </p>
          <a href="#">Continue Lendo</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">
      <div class="card">
        <div class="img-container">
          <a href="#"><img src="https://www.dailydot.com/wp-content/uploads/2018/05/crush.jpg" class="btn btn-outline-danger btn-sm" alt="blabla" class="card-img-top" id="imgUNcover"></a>
        </div>
        <div class="card-body">
          <a href="#" class="card-title cardTitleLink">
            <h1 class="cardTitleUN">
              Some title
            </h1>
          </a>
          <p class="card-text text-muted">blabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalblablabalbla
          </p>
          <a href="#">Continue Lendo</a>
        </div>
      </div>
    </div>

  </div>
</div>

И ручка: https://codepen.io/magnusriga/pen/VGdxJy?editors=1100

Используйте свойства object-position и object-fit, чтобы настроитькак изображение помещается в блок .

Окончательное редактирование:

Вот обновленное перо с некоторыми улучшениями полосы прокрутки и т. д..: https://codepen.io/magnusriga/pen/VGdxJy

Как поставить адаптивную крышку подгонки объектов, на карточку с изображением из Boostrap 4?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

Как поставить адаптивную крышку подгонки объектов, на карточку с изображением из Boostrap 4?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

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

Похожие темы