Question

我希望我的图像占据整个容器，设置高度为350像素，而不会牺牲其宽高比

我试过这个

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

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

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

修改

我还希望图像响应（因此img-responsive类）所以当屏幕较小时它也会缩小

Answer 1

为什么不是这样的？将图像移动到类，所以看起来像这样。随着页面变小，响应和缩放也是如此。

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

如何使图像以设定的高度

1 个答案: