Question

我正在尝试从psd设计构建一个html模板，到目前为止我开始使用一个问题开始使用移动设备。我有这个我绝对定位的图像，以达到这种效果。（附图）现在的事情是，我得到了图像工作按钮，折叠菜单不再工作，也没有品牌链接。我假设的是菜单和品牌都在图像背后，这可能会导致问题，但我尝试使用z-index来预先设置它并且仍然是相同的。

我有一个250px高度的图像容器，因为我希望图像填充这个..我得到它来填充容器，但它看起来挤压，我不知道如何解决它..

HTML：

    <!-- start mobile-img -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="top-img-container">
          <h1 class="img-caption">Bodybuilding is good for your health</h1>
          <img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image">
        </div>
      </div>
    </div>
  </div>
<!-- end mobile-img -->

CSS：

.top-img-container{
  padding-top: 60px;
  height: 250px;
  min-width: 100%;
  position: relative;;
}

.top-img{
  position: absolute;
  top:0;
  left: 0;
  padding-top: 60px;
  min-width: 100%;
}

Answer 1

添加

object-fit: cover;

到图像的css，并摆脱

position: absolute;
top:0;
left: 0;

Answer 2

由于object-fit的浏览器支持非常糟糕，并且由于您具有给定的高度，因此请使用div代替。

当然也可以在CSS中设置background-image，但有时资源会在标记中设置，因此在将img替换为{div时通常会错过这种方式。 {1}}。

.top-img-container{
  padding-top: 60px;
  height: 250px;
  min-width: 100%;
  position: relative;;
}

.top-img{
  height: 100%;
  background-size: cover;
  background-position: center;
}

<!-- start mobile-img -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="top-img-container">
          <h1 class="img-caption">Bodybuilding is good for your health</h1>
          <div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div>
        </div>
      </div>
    </div>
  </div>
<!-- end mobile-img -->

在移动设备

2 个答案: