无法根据轮播尺寸调整轮播图像的大小

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>