Css 如何使图像以设定的高度填充整个容器

我希望我的图像以350px的设定高度占据整个容器，而不牺牲其纵横比

我试过这个

<div class="container-fluid">
 <div class="row">
  <div class="background-container" >
   <img src="bgImageUrl" class="img-responsive" height="350px">

.background-container {
  max-height: 350px;
}

.背景容器{
最大高度：350px；
}

图像是1400x700。当我将高度设置为350px时，它只覆盖左侧，其余部分作为空白。将其宽度设置为100%只会拉伸图像

编辑

---

我还希望图像响应（因此是

img responsive

类），这样当屏幕变小时，它也会缩小

为什么不这样呢？将图像移动到一个类，使其看起来像这样。此外，它还具有响应性，并随着页面变小而扩展

.background容器{
高度：350px；
宽度：100%；
背景：url（'https://static.pexels.com/photos/68672/beach-beverage-caribbean-cocktail-68672.jpeg'）0中心不重复；
背景尺寸：封面；
}
@仅介质屏幕和（最大宽度：640像素）{
.背景容器{
高度：180像素；
宽度：100%；
背景：url（'https://static.pexels.com/photos/68672/beach-beverage-caribbean-cocktail-68672.jpeg'）0中心不重复；
背景尺寸：封面；
}
}

.background container、.background container.img responsive{最大高度：350px；}

。。。响应图像类强制

height:auto

到您的图像；覆盖你的身高声明。我试过了，它确实有效！但我也在努力让它的高度反应灵敏。所以最大值将是350px，当屏幕尺寸更小时，它会降低到一定的高度，你希望它在更小的屏幕上吗？或者你只是想让高度变小？因为我觉得它取决于你的图像，最小高度是180mm，用媒体查询更新它，这样就足够了吗？或者你在寻找像图片一样的平滑过渡？