web-dev-qa-db-fra.com

Miniatures d'image CSS pure

Je souhaite afficher une collection de vignettes d'images dans une grille. Les images viendront dans une variété de tailles, mais je voudrais limiter les vignettes à une taille particulière (disons 200px large et 150px grand).

Ce que je voudrais trouver, ce sont des balises HTML magiques et des règles CSS qui

  1. Autoriser les images à être incluses dans les éléments <img> normaux
  2. Assurez-vous que les vignettes tiennent dans leur champ 200 x 150 pixels, conservent leurs proportions et sont centrées dans la dimension dépassée.
  3. Ne nécessite pas JavaScript ou une connaissance spécifique des dimensions réelles de chaque image

Je ne sais pas si c'est possible. Je peux faire une (mauvaise) approximation de ce que je veux avec le balisage suivant:

<div class="thumb">
    <img src="360x450.jpeg">
</div>

et CSS:

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

Cette tentative se brise de différentes manières:

  1. Les images en orientation portrait seront correctement dimensionnées, mais déborderont par le bas du conteneur, ce qui entraînera un recadrage verticalement excentré.

  2. Les images larges et courtes seront déformées dans la dimension horizontale en raison des règles width et min-height codées en dur.

  3. Mais sans cette width codée en dur, les images plus grandes que la hauteur et la largeur minimales ne seront pas du tout redimensionnées.

Si cela peut vous aider, j'ai donné un exemple qui illustrera (espérons-le) ce que j'essaie de faire, ici:

Je sais que je peux résoudre ce problème en omettant complètement l'élément <img> et en tirant les vignettes comme une image d'arrière-plan centrée sur l'élément conteneur, mais si possible, j'aimerais conserver les éléments <img> dans la page.

Merci pour toute aide ou des conseils que vous pouvez fournir!

Edit: Je suppose que je devrais noter qu’une solution idéale fonctionnera dans IE 6+ et les navigateurs modernes, mais toute solution fonctionnant dans IE 9+ et autres les navigateurs modernes (WebKit récent, Gecko, etc.) seront acceptés avec plaisir.

htmlcssthumbnails
17
Will McCutchen

Possible, probablement.

Aussi, probablement pas la meilleure idée. Votre gros problème à surmonter ici est l’orientation des vignettes. Et si vous avez affaire à un panorama? Bien sûr, la réduction va créer une image "écrasée" très disgracieuse, comme le ferait une très grande image. Il est rare que tout le monde traite en 4X3 ou 16X9 100% du temps. Donc, vous aurez besoin d'un mécanisme pour masquer l'image. Même si le rapport est correct, le redimensionnement ne sera pas aussi net qu'avec un programme comme Photoshop ou Gimp.

L’autre problème majeur de ce processus de réflexion est que vous allez envoyer d’énormes quantités de données inutiles au serveur via des images plus grandes. Cela prendra plus de temps à charger, à remplir le DOM inutilement et, globalement, à empêcher l'expérience d'interface utilisateur.

Il y a un certain nombre de façons de contourner ce problème, aucune d'entre elles étant du pur CSS. Je me suis attaqué à ce problème plusieurs fois, chacune d’une manière unique en fonction du client. Pour un client qui voulait des choses totalement personnalisées, il s’agissait d’un programme de téléchargement personnalisé, redimensionnant via iMagick (qui fait partie de la magie de l’image) et de CSS/Javascript personnalisé pour l’album doté d’une grande interactivité. Dans un autre cas, j'utilise Galerie en tant que backend - pour gérer la création, l’affichage, le titrage, le rognage et l’organisation des vignettes - puis je sors les liens d’image reformatés de la base de données pour les afficher de manière plus attrayante. manière. Vous pourriez vous épargner encore plus de problèmes en utilisant simplement quelque chose comme l’API Flickr pour extraire des images.

Voici un tut sur en utilisant ImageMagick pour faire des vignettes.

4
bpeterson76

Vous pouvez (en quelque sorte) y parvenir avec les ajouts CSS3 background-size: contain et cover.

Démo en direct

  • contain (image du haut) convient à l’ensemble de l’image, en conservant les proportions. Rien n'est recadré.

  • cover (image du bas) remplit l’élément contenant verticalement ou horizontalement (selon l’image) et coupe le reste.

8
drudge
.thumb img {
    max-width: 200px;
    max-height: 150px;
    min-width: 200px;
    min-height: 150px;
}

Eh bien, je sais que pour les pouces, vous voudriez qu'il soit max et min si vous voulez une image plus petite pour l'agrandir et une image plus grande pour la réduire.

1
buhbang

essayez de définir max-width et height et non min car si l'image n'est pas exactement de cette taille, elle débordera :)

0
cmplieger