J'ai de la difficulté à manipuler la taille de l'image + bootstrap

Question

Hé les gars, je suis un peu perdu ici.

Je suis en train de recréer cette page web:

Voici ce que mon résultat ressemble à:

Je ne parviens pas à l'image. Je l'ai assez bien où je l'aimerais mais je n'arrive pas à obtenir la hauteur pour correspondre à l'image de référence. Je me suis dit que ça irait bien dans une rangée de bootstrap sans avoir besoin de beaucoup de css.

Voici mon code:

<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

lignes Bootstrap ont aucune hauteur inhérente. Ils vont s'étendre pour s'adapter à tout ce que vous y mettez. Donc, vous devez définir une propriété CSS height ou max-height sur votre .row.

L'autre astuce consiste à afficher l'image avec un rapport de culture et d'aspect différent de son état naturel. En d'autres termes, vous ne voulez pas afficher l'image complète, juste une partie de celle-ci. You can do this avec une combinaison de <img> avec un <div>, mais il se sent un peu hacky parce que vous devez utiliser des marges négatives. Je pense qu'il est plus facile de faire de l'image un background-imageusing CSS.

Essayez quelque chose comme ceci:

<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. Vos étiquettes </br> doivent être simplement <br>. `` est une balise invalide et sera probablement ignorée par votre navigateur.