html - 手机定位问题

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 的浏览器支持非常差，并且由于您有给定的高度，所以这样做，您使用 div 代替。

background-image 当然也可以在 CSS 中设置，尽管有时资源会在标记中设置，因此显示为一种方式，在替换 时经常被遗漏带有 div 的 img。

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