web-dev-qa-db-fra.com

Envelopper une image dans un lien dans une ligne Bootstrap

J'ai passé plus de temps que je ne le souhaite à admettre pour essayer de faire en sorte qu'une rangée d'images devienne des liens cliquables dans une row qui aligne les images au milieu de la row que ne rompt pas la réactivité de Bootstrap . Les liens fonctionnent correctement, mais l'alignement est désactivé en raison des variations dans la taille des images (bien que ce soient tous des paysages compacts). Je peux obtenir l'alignement vertical des images dans div.row, mais cela nuit à la réactivité et les images ne sont pas redimensionnées correctement.

Voici un JSFiddle de ce que j'ai essayé

Voici ce que j'essaie de faire: 

row
--------------------------------------------------------
                  |                  |                  
      image1      |      image2      |      image3      
                  |                  |                  
--------------------------------------------------------

Voici ce que je peux faire de mieux:

row
--------------------------------------------------------
      image1      |      image2      |      image3      
                  |      image2      |      image3      
                  |      image2      |            
--------------------------------------------------------

Cette réponse est exactement ce que j'essaie de réaliser, mais les images ne sont pas centrées verticalement pour moi lorsque j'utilise les classes CSS à partir de celle-ci.

J'ai des images qui sont toutes des images de paysage compactes sur un projet Bootstrap. Essayer d'aligner les images verticalement dans la rangée

Ce que j'ai essayé:

Voici ce que j'ai commencé avec:

<div class="row vertical-align">
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>    
</div>

Je peux tout faire apparaître dans une ligne sous forme de lien cliquable, mais en raison de légères variations dans la taille des images, celles-ci ne sont pas alignées au centre vertical de la ligne. J'ai ajouté ce vertical-align sur un écran normal, mais cela altère la réactivité de Bootstrap lors du redimensionnement de la fenêtre.

.vertical-align {
    display: flex;
    align-items: center;
}

Pour ma deuxième tentative, j'ai supprimé la classe d'alignement vertical du div.row et supprimé la classe img-responsive de Bootstrap de la balise img, comme suit:

<div class="row">
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-1.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-2.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-3.png"></a></div>
    </div>    
</div>

Dans mon fichier CSS, j'ai ajouté ces classes:

.jumbotron .row > a {
    display: block;
}

.jumbotron > .row div a img {
    max-height: 80px;
    max-width: 100%;
    vertical-align: middle;
}

Les classes CSS ci-dessus ne cassent pas Bootstrap, mais elles alignent les images sur leur sommet, pas sur le centre vertical du div.row.

J'ai essayé un tas d'autres trucs, mais je ne peux pas le faire fonctionner. Ce poste semblait rempli de promesses, mais je ne pouvais pas le faire fonctionner:

Comment aligner verticalement une image dans div

Je voudrais obtenir ceci compris avec CSS et HTML, pas de jQuery. Toute suggestion concernant ce que je vais faire serait grandement appréciée.

htmlcsstwitter-bootstrap
4
Adrian

Les colonnes de Bootstrap sont flottantes par défaut avec la propriété css float. Avec float, nous ne pouvons pas aligner les colonnes au milieu. Cependant, avec display: inline-block nous pouvons le faire. Tout ce dont nous avons besoin est de supprimer float des styles de colonnes et de les changer en inline-block avec vertical-align: middle et vous obtiendrez ce que vous voulez. Mais n'oubliez pas de supprimer l'espace supplémentaire fourni avec inline-block.

Voici le truc.

.vertical-align {
  letter-spacing: -4px;
  font-size: 0;
}

.vertical-align .col-xs-4 {
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="jumbotron">
    <div class="row vertical-align">
      <div class="col-xs-4">
        <a href="#" title=""><img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive"></a>
      </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive"></a>
    </div>
    <div class="col-xs-4">
        <a href="#" title=""><img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive"></a>
    </div>    
  </div>
</div>
</div>

Remarque: Le fait de définir font-size: 0; letter-spacing: -4px sur le parent et d'appliquer le font-size: 14px; letter-spacing: 0 du parent sur les éléments enfants supprime les espaces blancs fournis avec inline-block.

4
Mohammad Usman

J'ai créé une petite solution de contournement. Le vrai problème est que l'élément <a> ne coopère pas. L'élément de lien n'obtiendra pas la largeur/hauteur de son enfant, c'est pourquoi la solution fournie ne fonctionne pas. Une solution consiste à utiliser la propriété background-image. Donner à un wrapper une hauteur et une largeur solides et appliquer l'image en tant qu'arrière-plan à l'aide de background-size: contain. Voir le violon fourni ci-dessous.

https://jsfiddle.net/f9ogw26n/21/

.wrapper {
  height: 200px;
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#">
        <div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
        </div>
      </a>
    </div>
    <div class="col-xs-4">
      <a href="#" title="">
        <div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
        </div>
      </a>
    </div>
  </div>
</div>
0
Luuk Skeur

s'il vous plaît essayez ceci et lemme savoir si c'est ce que vous vouliez

 <style>
        img {
        height: auto;
        width: 100%;
    }

    .vertical {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .abcd {
        min-width: 5em;
        flex: 1;
    }
    </style>

</head>

<body>
    <div class="container">
        <div class="vertical">
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
            <div class="abcd">

                <a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>

            </div>
        </div>
    </div>

</body>
0
Dhaval Chheda