web-dev-qa-db-fra.com

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

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

ab

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 height: 100px ;, Ceci conduit à ne pas répondre, si je redimensionne le navigateur, la hauteur de la div reste inchangée. Si possible, je veux que cette liste d'images soit réactive.

csstwitter-bootstrapcss3twitter-bootstrap-3
21
Sato

Remplacez height et width par 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

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

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

En 2017, vous pouvez utiliser flex. De plus, vous obtiendrez les images centrées dans le conteneur de miniatures: 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;
}
2
raisercostin

Cela devrait aider, au moins pour votre exemple. Il peut y avoir des cas où cela ne fonctionnera pas. Dans ce cas, vous devez trouver une solution JS.

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

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

Utilisez ceci.

0
Danish Khan

(J'ajouterai une réponse, bien qu'il s'agisse d'une vieille question. J'avais le même problème jusqu'à ce que j'ajoute la classe thumbnail au lien de l'image et que je regarde un peu plus loin. Aucun ajout de CSS n'est nécessaire.)

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

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

Et ceci (css non minifiés, 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 immédiatement si vous avez ajouté la classe thumbnail au lien de l'image. (Vous devez supprimer ces deux éléments pour éviter les problèmes.) Et cela fonctionne avec ou sans les fichiers css ajoutés:

.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
ZZ-bb