イメージサイズ+ブートストラップの操作に問題があります

Question

私はここで少し迷っています。

私はこのWebページを再作成しようとしている：

私は画像とのトラブルを抱えている：

は、ここに私の結果は次のようになります。私はそれを好きにしていますが、参照画像と一致する高さを得ることはできません。私はそれが多くのCSSを必要とせずにブートストラップ行にうまく収まると考えました。ここで

は私のコードです：

<div class="content"> 
 
\t \t <div class="container-fluid"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <h1>Lorem </br> Ipsumsz</h1> </br> <p>Lorem Ipsum dolor sit amet consecetur adipised do </br>   elusmod tempor incididunt. Adipised do eiusmod tempor.</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <h1 id="bigNumber">01</h1> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-8 col-lg-offset-4"> 
 
\t \t \t \t \t <img src="olu-eletu-27968.jpg" class="img-responsive center-block"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

ブートストラップの行には、固有の高さを持っていません。彼らはあなたがそれらの中に入れたものに合わせて拡大します。そのため、.rowにheightまたはmax-heightのCSSプロパティを設定する必要があります。

もう1つのトリックは、自然な状態とは異なるクロップとアスペクト比で画像を表示することです。言い換えれば、完全な画像を表示する必要はなく、その一部だけを表示することです。 You can do thisと<img>の組み合わせは<div>ですが、負のマージンを使用する必要があるため、ハッキリのように感じます。私は、画像をbackground-imageusing CSSにする方が簡単だと思います。

<div class="content"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
     <h1>Lorem <br> Ipsumsz</h1> <br> <p>Lorem Ipsum dolor sit amet consecetur adipised do <br>   elusmod tempor incididunt. Adipised do eiusmod tempor.</p> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
     <h1 id="bigNumber">01</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row" style="height: 300px;"> 
 
     <div class="col-lg-8 col-lg-offset-4" style="background-image: url('olu-eletu-27968.jpg'); background-position: center;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

PS：

はこのような何かを試してみてください。 </br>のタグは<br>である必要があります。 `'は無効なタグであり、ブラウザによって無視される可能性が非常に高いです。