web-dev-qa-db-fra.com

Carte Bootstrap/flexbox: déplace l'image sur le côté gauche/droit du bureau

J'essaye de construire la disposition de carte suivante en utilisant Bootstrap 4 avec la flexbox activée. La photo est prise de ma mise en œuvre actuelle et cela fonctionne comme prévu.

 Current mobile layout

La structure HTML est la suivante:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

Maintenant, lorsque je passe à un écran plus grand, je reçois la sortie suivante (ce qui est prévu avec Bootstrap mais je n'en voulais pas):

 enter image description here

Ce que j'aimerais voir à la place, c'est:

 enter image description here

Ma question est donc la suivante: comment puis-je implémenter correctement ce type de mise en page? J'utilise flex-box, donc les colonnes Bootstrap (col- *) ont toujours la même hauteur, ce qui est exactement ce que je veux. Mais je devrais supprimer les marges entre les deux colonnes, puis rendre le contenu des deux colonnes couvrant toujours 100% de la hauteur du parent et enfin vérifier que l'image conserve son rapport d'aspect, elle devrait donc être rognée au centre, comme dans l'exemple ci-dessous.

J'ai cherché sur Google et essayé de nombreuses solutions différentes, mais toutes semblent être des solutions trop complexes ou trop complexes. Je me demande donc s'il est vrai qu'il n'y a pas de moyen facile d'implémenter ce type de mise en page ...?

Remarque: la solution ne doit pas nécessairement être liée à Bootstrap, la solution générale pour ce type de problème est encore meilleure.

htmlcsstwitter-bootstrapresponsive-designbootstrap-4
15
m5seppal

J'ai trouvé une façon de faire cela en utilisant background-size: cover. Je devais utiliser div au lieu de img, mais sinon cette solution fonctionne et dans mon cas, img n'est pas si nécessaire. D'autres solutions sont toujours les bienvenues.

J'ai modifié mon HTML un peu:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pour card-img-bottom, j'ai défini le style:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

Et dans la vue du bureau, je modifie la hauteur à 100% afin que la hauteur soit toujours la même que la hauteur du bloc de cartes.

Il y a encore du bourrage supplémentaire entre bloc-carte et card-img-bottom dans la vue du bureau à cause des bourrages par défaut de Bootstrap. Pour cette raison, la zone blanche est légèrement plus grande que l'image. Pour moi, ce n'est pas un problème, donc je ne les ai pas supprimés.

 enter image description here

22
m5seppal

Une solution que j'ai trouvée, j'ai des problèmes de hauteur d'image, mais c'est une autre question ...: P

OK, le gros problème de réinventer quelque chose qui est déjà prêt est que les solutions ont tendance à poser des problèmes lorsque nous avons besoin des fonctionnalités d'origine. Dans ma solution, nous venons d'ajouter une classe, qui fonctionnerait avec l'autre cas d'utilisation Ainsi, si la classe "card-img-left" existe, la classe "card-budy" aurait une marge gauche proportionnelle à la taille de l'image alignée à gauche. Si la classe n'existe pas, cette marge serait l'original C’est une solution viable qui ne perturberait pas le système initial, mais elle doit être perfectionnée ...

 .card {
      overflow: hidden;
  }

    .card-img-left {
        position: absolute;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 40%;
    }

    .card-img-left ~ .card-body {
        margin-left: 40%;
    }
0
Luciano Lourenço