Bootstrap/flexbox carte: déplacement de l'image vers la gauche/droite sur le bureau

Je suis en train de construire la carte de mise en page à l'aide de Bootstrap 4 avec flexbox activé. L'image est tirée de mon actuel de la mise en œuvre et il fonctionne comme prévu.

Bootstrap/flexbox carte: déplacement de l'image vers la gauche/droite sur le bureau

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, quand je l'échelle de la taille de son écran, j'ai obtenu le résultat suivant (qui est attendue avec Bootstrap, mais ce n'est pas voulu):

Bootstrap/flexbox carte: déplacement de l'image vers la gauche/droite sur le bureau

Ce que je voudrais voir, au contraire, est:

Bootstrap/flexbox carte: déplacement de l'image vers la gauche/droite sur le bureau

Donc ma question est, comment je peux l'implémenter correctement ce type de mise en page? Je suis à l'aide de flex-boîte, de sorte que Bootstrap colonnes (col-*) sont toujours à la même hauteur, ce qui est exactement ce que je veux. Mais je devrais supprimer les paddings entre deux colonnes, puis faire deux colonnes, le contenu est toujours de couvrir 100% des parents de la hauteur, et enfin, assurez-vous que l'image entretient c'est le rapport d'aspect, de sorte qu'il devrait être coupée à partir du centre, comme je l'ai dans l'exemple.

J'ai Googlé et essayé de nombreuses solutions différentes mais tous semble être trop complexe ou "hacky" des solutions. Alors je me demandais est-il vrai qu'il n'est pas facile à mettre en œuvre ce type de mise en page...?

Remarque: la solution ne doit pas être Bootstrap liées, la solution générale pour ce genre de problème est encore mieux.

background-size ou de l'objet de l'ajustement “facile” CSS solutions.
Oui vrai, mais avec l'arrière-plan de la taille, je ne peux pas utiliser cette balise img, mais ont à utiliser des div à la place? Et je pense que l'objet de l'ajustement n'est pas pris en charge par IE et le Bord de sorte qu'il n'est pas acceptable de solution.
Ce sont les deux “facile” des moyens. Bien sûr, les choses se compliquent si vous avez besoin de mettre en œuvre des issues pour les plus âgés/incapable navigateurs. Pour l'objet de l'ajustement sur les images dans IE/Edge il y a des solutions de contournement/polyfills.
J'ai choisi de fond-taille du chemin à parcourir. En fait, je voulais utiliser la balise img, mais plutôt de sacrifier plutôt que d'aller trop complexe, des solutions et des mécanismes de secours.

OriginalL'auteur m5seppal | 2016-08-30

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *