Question Comment adapter l'image pour l'adapter au conteneur?


J'ai une liste d'images, je veux des images à l'échelle dans leurs conteneurs qui ont la même taille. comme ça:

a b

J'ai créé un jsfiddle

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" >
            </a>
        </div>
    </div>
</div>

Comment puis je faire ça? Et dans mon exemple, j'ai défini la hauteur: 100px; cela conduit à ne pas répondre, si je redimensionne le navigateur, la hauteur des div reste inchangée. Si possible, je veux que cette liste d'images soit réactive.


18
2018-06-02 11:52


origine


Réponses:


Changer la height et width à max-height et max-width. L'image ne sera pas plus grande que son parent.

.thumbnail img {
    max-height: 100%;
    max-width: 100%;
}

Violon mis à jour


27
2018-06-02 11:55



.thumbnail {
    height: 100px;
    display: table;
}

.thumbnail img {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

5
2018-06-02 11:58



En 2017, vous pouvez utiliser le flex. De plus, vous obtiendrez les images centrées dans le conteneur de vignettes: violon mis à jour

.thumbnail {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px blue;
}

.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    border: solid 1px red;
}

1
2017-10-03 07:08



Cela devrait aider, du moins pour votre exemple. Il peut y avoir des cas dans lesquels cela ne fonctionnera pas. Dans ce cas, vous devez trouver une solution js.

.thumbnail img {
  height: 100%;
  width: auto;
}

0
2018-06-02 11:58



.thumbnail img {
 height: 100%;
    width: 100%;
}

Utilisez ceci.


0
2018-06-02 12:01



 .thumbnail {
        height: 100%;
    }

    .thumbnail img {
        max-height: 100%;
        max-width: 100%;
        border: 1px solid red;
    }

0
2018-06-03 16:38



(J'ajouterai une réponse bien qu'il s'agisse d'une vieille question. J'ai eu le même problème jusqu'à ce que j'ajoute la classe thumbnail au lien de l'image et regardé un peu plus profond. Aucun css ajouté n'était nécessaire.)

Peut-être que quelque chose a changé. Dans Bootstrap 3.3.7. il y a ceci (css non minifié, ligne 5019):

.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}

Et ceci (css non minifiée, ligne 1124):

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

Donc, tout devrait fonctionner dès que vous avez ajouté la classe thumbnail au lien de l'image. (Vous devez supprimer les deux et les choses vont casser.) Et cela fonctionne avec ou sans le css ajouté:

.thumbnail img {
  max-height: 100%;
  max-width: 100%;
}

Le css ajouté remplace les styles Bootstraps, du moins pour moi puisque le style ajouté est inclus après les propres styles Bootstraps. (Mais c'est redondant.)


0
2018-06-13 06:39