Невозможно изменить размеры изображений карусели в соответствии с размерами карусели

Question

Я пытаюсь создать адаптивную карусель с несколькими изображениями. Существует два вида изображений:
1. Меньшие изображения
2. Большие изображения.

Я хочу меньшие, независимо от их размера, растягивать и заполнять изображения, а также изменять размер больших изображений или, еслиэто невозможно, обрезайте и подбирайте изображения нужного размера, как есть. Кроме того, как вы можете видеть, я установил max-height:500px, что не является хорошей практикой для отзывчивости, но если я этого не сделаю, большие изображения будут выглядеть больше, чем я хочу.

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

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox"
        style="width:100% !important; height:100% !important; max-height:500px !important;">

        <div class="carousel-item active"
            style="background-size: cover !important; background-position: 50% 50% !important; min-width: 100% !important; min-height: 100% !important;">
            <img class="d-block w-100 h-100"
                src="{{ v.url }}">
        </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Я попробовал почти каждый ответ на этот вопрос, например, background-size: cover и т. Д., И ни один из них не помог мне. Поэтому, ПОЖАЛУЙСТА, проверьте один раз, прежде чем отмечать его как дубликат, или перед тем, как обратиться к какому-либо другому ответуЯ не думаю, что это необходимо, но эта карусель находится в столбце в сетке.
Если бы вы могли сделать это без использования js, это было бы здорово, потому что я не являюсь фронт-эндовым разработчиком, я просто хочучтобы исправить это, не тратя много времени.

Answer 1

background-size: cover может работать здесь, если вы используете изображение в качестве фона вместо тега img. Вот пример:

const img = [
  'https://api.adorable.io/avatars/100/a@adorable.png',
  'https://api.adorable.io/avatars/200/b@adorable.png',
  'https://api.adorable.io/avatars/400/c@adorable.png',
  'https://api.adorable.io/avatars/800/d@adorable.png',
  'https://api.adorable.io/avatars/1200/e@adorable.png'
];

let current = 0;

const prev = document.querySelector('a[data-slide="prev"]');
const next = document.querySelector('a[data-slide="next"]');
const image = document.querySelector('.carousel-item.active img');
const picture = document.querySelector('.carousel-item.active');

const update = () => {
  picture.style.backgroundImage = 'url(' + img[current] + ')';
  image.src = img[current];
}

const goBack = () => {
  current = Math.max(0, current - 1);
  update();
}

const goForward = () => {
  current = Math.min(img.length - 1, current + 1);
  update();
}

prev.addEventListener('click', goBack);
next.addEventListener('click', goForward);
update();

.carousel {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 95vh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  align-items: stretch;
  text-align: center;
}

.carousel-inner {
  grid-column: 1/3;
}

.carousel-item.active {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

img.sr-only {
  visibility: hidden;
}

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">

    <div class="carousel-item active">
      <img class="sr-only d-block w-100 h-100" src="https://api.adorable.io/avatars/285/abott@adorable.png">
    </div>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>