Html 调整高度时，如何保持100%宽度的CTA图像不拉伸？

我正在制作一个网站，我需要一个CTA图像。 我使用的是Bootstrap4，我制作了一个自定义CSS来调整图像的外观。我把它放在屏幕的整个宽度上，所以

宽度：100%
当我调整屏幕的大小时，图像是有响应的，并且会自动调整，使其变小并适合整个屏幕。但是当在常规的大屏幕上时，图像会占据整个网站，因此我希望能够将其保留为100%宽度，但高度较小。当我尝试调整最大高度时，它只会拉伸图像，看起来不吸引人。我该怎么办

这是HTML部分：

<!-- CTA Section -->
    <div class="img-wrapper">
        <img class="img-responsive" src="I/CTA.png">
        <div class="img-overlay">
            Want to see what more we have to offer? 
            <br><br>
            <a href="coffee.html"><button class="btn btn-md btn-primary">
             Click here</button></a>
        </div>
    </div>
<!-- /.img-wrapper -->

您可以使用，尽管它还不是很好，因此可能需要使用
背景图像的解决方案（基于您需要的浏览器支持）

下面是一个使用
对象拟合的解决方案

 .img-wrapper img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
 }


堆栈片段


.img包装器{
位置：相对位置；
}
.img包装器img{
宽度：100%；
最大高度：350px；
对象匹配：覆盖；
}
.img覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
字体系列：“Raleway”，无衬线；
字母间距：2px；
颜色：白色；
字体大小：14px；
}
.img覆盖：之前{
内容：''；
显示：块；
身高：60%；
}
钮扣{
字体系列：“Raleway”，无衬线；
字母间距：2px；
}
.btn响应{
/*匹配“btn md”*/
填充：10px 16px；
字号：18px；
线高：1.3333；
边界半径：6px；
}
@介质（最大宽度：760px）{
/*匹配“btn xs”*/
.btn响应{
填充物：1px 5px；
字体大小：12px；
线高：1.5；
边界半径：3px；
}
}

想看看我们还能提供什么吗？



您可以使用，尽管它还不是很好，因此可能需要使用
背景图像的解决方案（基于您需要的浏览器支持）

下面是一个使用
对象拟合的解决方案

 .img-wrapper img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
 }


堆栈片段


.img包装器{
位置：相对位置；
}
.img包装器img{
宽度：100%；
最大高度：350px；
对象匹配：覆盖；
}
.img覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
字体系列：“Raleway”，无衬线；
字母间距：2px；
颜色：白色；
字体大小：14px；
}
.img覆盖：之前{
内容：''；
显示：块；
身高：60%；
}
钮扣{
字体系列：“Raleway”，无衬线；
字母间距：2px；
}
.btn响应{
/*匹配“btn md”*/
填充：10px 16px；
字号：18px；
线高：1.3333；
边界半径：6px；
}
@介质（最大宽度：760px）{
/*匹配“btn xs”*/
.btn响应{
填充物：1px 5px；
字体大小：12px；
线高：1.5；
边界半径：3px；
}
}

想看看我们还能提供什么吗？