Причина, по которой это происходит, состоит в том, что div.card-img-overlay имеет следующие стили:
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
Это означает, что по мере того, как содержимое внутри этого элемента становится больше (или сам ящик становится меньше),коробка не будет расширяться, чтобы соответствовать содержанию.Это ограничение компонента карты Bootstrap, и вы не ошиблись.
У вас есть несколько вариантов, чтобы это исправить:
1) Ограничьте количество содержимого, которое может попадать внутрь карты, чтобы этого никогда не произошло.Для меня это единственное реальное решение.Судя по моим тестам, ограничение в 65 слов, или примерно 675 символов, похоже, работает для всех медиазапросов (используя ваши текущие стили).
1b) Увеличьте высоту изображения.Я не совсем уверен, сработает ли это, и вам нужно будет согласовать эти усилия с моим предыдущим предложением об ограничении ввода текста.
2) Пишите медиазапросы, чтобы соответственно уменьшить размер шрифта, чтобы текстприспосабливается, чтобы соответствовать при необходимости.Это утомительное решение, но, тем не менее, решение.Тем не менее, никакое количество стилей не может быть написано для размещения любого количества текста.Вам все равно нужно будет ограничить объем текста, который может помещаться внутри карты.
3) Используйте запрос элементов , чтобы настроить размер текста всякий раз, когда элемент становится слишком маленьким.Это не сильно отличается от использования медиазапросов CSS.
4) Откажитесь от компонента карты и просто создайте div с изображением в качестве фона.Вы можете использовать свойство background-size css, чтобы настроить растяжение и изменение размера изображения при увеличении или уменьшении элемента.