Dev Faq
0
votes

Hauteur d'image réactive à l'intérieur d'un conteneur flexible

J'ai une grille bootstrap standard et une image à l'intérieur d'un .col code> Quelle hauteur doit être égale à la hauteur du bloc de texte à droite:

p> 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

1 commentaires

votre expection est correcte mais puisque l'image est grande, c'est celui qui définit la hauteur et le texte a la même hauteur que celle-ci

3 Réponses :

0
votes

Je suppose quelque chose d'autre. Vous pouvez faire quelque chose comme celui-ci avec Taille de l'arrière-plan code>.

p> 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <div class="background-image"></div>
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

3 commentaires

Nah, cela sqeze l'image horizontalement.

@sdvnksv Je m'attends à ce que l'image devienne asymétrique va bien (de l'attente de l'OP). Sinon, vous devez définir cette image comme de l'arrière-plan de quelque chose. Ensuite, vous pouvez utiliser le couvercle de l'arrière-plan .

Non, ça ne va pas bien. J'ai ajouté Overflow: caché; pour masquer la largeur excessive.

0
votes

Retirez l'image du débit à l'aide de Position: absolu code> et votre texte définira la hauteur, vous pouvez utiliser la hauteur à 100% > sur l'image: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4">
    
      <img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

2 commentaires

Voulait éviter le positionnement absolu, mais cela ressemble à la seule solution.

@sdvnksv probablement il y a une autre solution;) .. Pour moi, vous pouvez utiliser une image absolue ou d'arrière-plan

-1
votes

Ajouté largeur: 100% code> espère que cela aide. Merci

​​ p> 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor