Изменение размера <img>в Карусели Bootstrap до родительского элемента в CSS

Question

У меня есть динамическая страница с каруселью.У меня нет контроля над изображениями, потому что они загружены пользователем.Есть некоторые рекомендации, но я не могу быть уверен, что они будут следовать им.

Итак, в моих тестах на развитие у меня есть три изображения: 100x100, 2800x1500 и 600x400

Я хочу, чтобы карусель была в середине страницы и была отзывчивой.У меня нет проблем с этим, если у меня есть более или менее непротиворечивые изображения.

...
<div class="carousel-item active">
    <div class="carousel-img">
        <img src="img1.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img2.png">
    </div>
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

В настоящее время CSS для «carousel-img» (я пробовал много комбинаций, но ничего не работает):

.carousel-img {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Теперь очень большое изображение работает как задумано.Он изменяет размеры не используя более 400 пикселей по вертикали.Проблема в двух других изображениях.Самый маленький из них, изменяет размеры от 100 до 400 пикселей по вертикали и примерно до 400 пикселей по вертикали, он не заполняется по горизонтали, несмотря на 100%.

Так как я могу сказать CSS изменить размеры изображений (без изменения аспектакоэффициент) использовать 100% родительского контейнера.Позвольте мне попытаться объяснить лучше: если карусель находится внутри <div class="col-md-6">, она должна использовать всю ширину и до 400 пикселей.

Редактировать

Пожалуйста, примите мои извинения, чтобы все напрасно тратили своивремя.Там нет ошибки в моем исходном коде.Но перед каруселью был предыдущий DIV, который гласил:

<div class="row justify-content-center">

Я подумал, что это не проблема, поскольку он предназначен для центрирования следующих DIV, я не знаю, почему это justify-content-center помешалоизображения, чтобы изменить их размер соответствующим образом, когда я удалил их, изображения внутри карусели начали работать как положено.

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

Answer 1

Найдите рабочий фрагмент в этом jsfiddle - для этого используется карусель с указанными в документации индикаторами и размерами изображений, которые вы рассматриваете.

Единственные изменения, которые вам нужно сделать, - это удалить ваш carousel-img div из вашего HTML и изменить .carousel-img наборов правил в CSS для применения к carousel-item вместо:

...
<div class="carousel-item active">
    <img src="img1.png">
</div>
<div class="carousel-item">
    <img src="img2.png">
</div>
<div class="carousel-item">
    <div class="carousel-img">
        <img src="img3.png">
    </div>
</div>
...

И CSS:

.carousel-item {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Также удалили класс active из всех ваших элементов, кроме первого, так как это вызовет проблемы в Bootstrap JS для итерации по слайдам.

Вы бы уже получили первый от меня за использование object-fit: cover с самого начала!