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

Question

I want my image to take up the whole container with a set height of 350px without sacrificing its aspect ratio

I tried this

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

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

The image is 1400x700. When I set the height to 350px it just covers the left side and the rest as a blank space. And setting its width to 100% just stretched the image

EDIT

I also want the image responsive (hence the img-responsive class) so when the screen is smaller it'll shrink as well

Answer 1

Why not something like this? Move the image to a class so looks like this. Also is responsive and scales as the page gets smaller.

 .background-container { height: 350px; width: 100%; background: url('https://static.pexels.com/photos/68672/beach-beverage-caribbean-cocktail-68672.jpeg') 0 center no-repeat; background-size: cover; } @media only screen and (max-width: 640px) { .background-container { height: 180px; width: 100%; background: url('https://static.pexels.com/photos/68672/beach-beverage-caribbean-cocktail-68672.jpeg') 0 center no-repeat; background-size: cover; } } 

  <div class="container-fluid"> <div class="row"> <div class="background-container"> </div> </div> </div>