移动定位问题

我想从psd设计中构建一个html模板，并且我开始使用移动设备，首先在一个问题上做得非常好。我有这个图像，我绝对定位为了达到这个效果。（图片附加）现在的事情是，我得到的图像工作按钮的崩溃菜单不再工作了，既没有品牌链接。我假设菜单和品牌是背后的形象，这可能会导致这个问题，但我试着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 -->

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

来源

2016-07-30 Ovidiu G

你想它来填充高度和宽度？ ..如果是这样，它将保持其长宽比的切割 – LGSon

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

来源

2016-07-30 14:06:39 LGSon

伟大工程，谢谢！该物体适合：封面的作品，但我看起来有点关于它的一些信息，正如你所说的浏览器支持并不是那么好。 –

@OvidiuG不客气:) – LGSon

只需添加

object-fit: cover;

到CSS的形象，摆脱

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

来源

2016-07-30 13:09:39

移动定位问题

回答

相关问题