Html 无法根据旋转木马尺寸调整旋转木马图像的大小

我正在尝试创建一个带有一些图像的响应式旋转木马。 有两种图像：
1.较小的图像
2.大型图像

我希望较小的图像（无论多么小）可以拉伸和填充，而较大的图像可以调整大小，或者如果不可能的话，可以裁剪并调整图像的大小以填充。 另外，正如您所看到的，我设置了

max height:500px

，这对于响应性来说不是一个好的实践，但是如果我不这样做，大图像看起来比我想要的要大

所以，基本上，我正在寻找一些方法来调整图像大小，使其适合我的carousal，而不考虑图像的尺寸。现在，我可以裁剪较大的图像，但无法拉伸和填充较小的图像。这些答案对我不起作用

<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>

我已经尝试了这个问题的几乎所有答案，例如

背景尺寸：封面

等等，但都不适合我。因此，请在标记副本或参考其他答案之前测试一次。 我不认为是否需要，但这个旋转木马位于网格中的一列中。

---

如果你不需要使用

js

就可以做到这一点，那就太好了，因为我不是前端开发人员，我只想在不浪费太多时间的情况下修复它。

背景尺寸：如果你使用图像作为背景而不是
img
标签，封面可以在这里工作。
以下是一个例子：


const img=[
'https://api.adorable.io/avatars/100/a@可爱的.png'，
'https://api.adorable.io/avatars/200/b@可爱的.png'，
'https://api.adorable.io/avatars/400/c@可爱的.png'，
'https://api.adorable.io/avatars/800/d@可爱的.png'，
'https://api.adorable.io/avatars/1200/e@可爱，png'
];
设电流=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'）；
常数更新=（）=>{
picture.style.backgroundImage='url（'+img[current]+'）；
image.src=img[当前]；
}
const goBack=（）=>{
电流=数学最大值（0，电流-1）；
更新（）；
}
常量goForward=（）=>{
电流=数学最小值（img.length-1，电流+1）；
更新（）；
}
上一个addEventListener（“单击”，返回）；
next.addEventListener（'click'，goForward））；
更新（）
.carousel{
保证金：0；
填充：0；
宽度：100%；
高度：95vh；
显示：网格；
网格模板行：1fr自动；
网格模板柱：1fr 1fr；
调整项目：拉伸；
对齐项目：拉伸；
文本对齐：居中；
}
.旋转木马内部{
网格柱：1/3；
}
.carousel-item.active{
宽度：100%；
身高：100%；
背景重复：无重复；
背景尺寸：封面；
}
仅限img.sr{
可见性：隐藏；
}

您是否尝试过
对象匹配：封面属性？是的，先生，我有。在该项目上有特定的
高度
和
宽度
，如
对象适合度：封面；高度：60vh；宽度：100%？