Html 手机定位问题

我正试图从psd设计中构建一个html模板，我首先开始使用mobile，到目前为止做得很好，但有一个问题。 为了达到这个效果，我将这个图像放置在绝对位置。（附图） 现在的问题是，我得到的图像工作的按钮折叠菜单不再工作，也没有品牌链接。我假设菜单和品牌在图片后面，这可能会导致问题，但我尝试了z-index将其放在前面，但仍然是一样的

我有一个250像素高的图像容器，因为我想让图像填充这个。。我把它装满了容器，但它看起来很挤，我不知道如何修理它

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

加上

object-fit: cover;

为图像添加css，并删除

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

---

由于

objectfit

对浏览器的支持非常差，并且由于您有一个给定的高度，所以可以这样做，使用

div

当然，也可以在CSS中设置

背景图像

，尽管有时会在标记中设置资源，因此显示了一种方法，即在使用

div

替换

img

时经常会遗漏

.top img容器{
填充顶部：60px；
高度：250px；
最小宽度：100%；
职位：相对；；
}
.top img{
身高：100%；
背景尺寸：封面；
背景位置：中心；
}

健美对你的健康有好处

您希望它同时填充高度和宽度吗。。如果是这样的话，它将被削减保持它的aspect ratioWorks很棒，谢谢！object-fit:cover也可以，但是我看了一些关于它的信息，正如你提到的，浏览器支持不是很好。

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