モバイルでの位置付け問題

Question

私はpsdデザインからhtmlテンプレートを作成しようとしています。 私は、この効果を達成するために私が絶対的に配置したこの画像を持っています。 （Image attached） 崩壊メニュー用のボタンを使ってイメージを作ったのは、もはやもうブランドリンクではないということです。私が想定しているのは、メニューとブランドがイメージの背後にあり、問題を引き起こす可能性があると仮定していますが、Zインデックスを試してみると、前と同じで、まだ同じです。

私はイメージ用の容器を持っていますこれは私がこれを埋めるために画像を望んでいたので、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%; 
} 

Answer 1

を取り除きます代わりにdivを使用します。時々、リソースが故にdivでimgを交換する際に一つの方法として、しばしば逃したことを示す、マークアップに設定されますけれども、もちろんの

background-image缶は、同様にCSSで設定すること。

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

Answer 2

ただ、画像のCSSに

object-fit: cover; 

を追加し、object-fitは本当に悪いのブラウザをサポートしている、とあなたが与えられた高さを持っているとして、次のように行いますので

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