Bootstrap 4 - проблема с изменением размера фона карты

Question

Так что в настоящее время я использую сеточную систему Bootstrap и простую карту.В карточке я динамически отрисовываю фоновое изображение.Подумайте о сетке Instagram.Все работает нормально, за исключением того, что когда я опускаюсь ниже определенной ширины столбца, карта изменяет его размер, возможно, до 10% от его первоначальной высоты, и изображение едва видно.

<div class="row">
    <div class="col-md-4 col-sm-4">
       <div class="card" style=" min-height: 100%; min-width: 
       100%;background-image: url('<%= rails_blob_path(post.images.first) 
       %>'); background-position: center; background-size: cover;">

       </div>
     </div>
   </div>

col-md-4: все хорошо, какисключено:

Ниже col-sm-4 (или md, на самом деле не имеет значения, как только оно падает ниже последнего определенного класса col, оно начинает выглядеть так):

Как видите, как только я уменьшаю ширину браузера, он просто привязывает высоту карты ко второму изображению.

Можно ли изменить размер карты на втором изображении, чтобы заполнить высоту, не возиться с высотой других столбцов?Добавление "min-height: 200px;" исправит эту проблему, но также приведет к путанице с другими значениями ширины и сделает их растянутыми.

Извините, если это основной вопрос.Я нашел несколько постов, но никак не мог это исправить и, как правило, бэкэнд, просто пытался лучше понять Bootstrap.

Answer 1

Итак, я пришел к решению, спасибо всем за ваш вклад.На всякий случай, если кто-то столкнется с этой проблемой:

Вот рабочее решение:

<div class="card h-100">

  <%= image_tag(post.images.first, class: 
 'img-responsive', style: "width: 100%; height: 
  100%;")%>
</div>

Я пробовал это раньше, но карты были неравномерной по высоте, и изображения не были действительно полнымиширина высота.Ключ здесь, чтобы установить карту на h-100 , чтобы высота карты была одинаковой.Затем растяните изображение по ширине и высоте на 100% и используйте img-responsive.Таким образом, изображение хорошо масштабируется вместе со всей шириной столбца.

Привет!

Answer 2

Использование «background-size: Содержит» сделает так, чтобы ваши изображения не растягивались и были полностью видны, но вы все еще застряли с установкой минимальной высоты, которая не будет мешать ширине ваших столбцов, так что выне нужно беспокоиться об этом.Подумайте об использовании тега img вместо div с фонами, так как они будут иметь размер в зависимости от изображения, тогда как размер изображения сам по себе с помощью div при использовании div с w / background

Cheers, Ethan