Vignettes d'image CSS pure

Je veux afficher une collection de vignettes dans une grille. Les images viennent dans une variété de tailles, mais j'aimerais limiter les vignettes pour une taille donnée (disons 200px large et 150px de haut).

Ce que j'aimerais trouver sont magiques balisage HTML et CSS règles

1. Permettre les images à inclure dans la normale <img> éléments
2. De s'assurer que les vignettes s'intégrer dans leur 200x150 pixels, conservent leurs proportions, et sont centrées dans n'importe quelle dimension ils débordement.
3. Pas besoin de JavaScript ou de connaissances particulières de chaque image dimensions réelles

Je ne suis pas sûr si cela est possible. Je peux faire un (mauvais) 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 dans une variété de façons:

1. Images qui sont en orientation portrait sera de taille correctement, mais un débordement à travers le fond du récipient, résultant à la verticale-centre de recadrage.
2. Images qui sont larges et courtes sera déformée dans la dimension horizontale, en raison de la codées en dur width et min-height règles.
3. Mais sans que codée en dur widthles images qui sont plus grandes que la hauteur minimale et la largeur ne sera pas redimensionnée.

Si c'est utile, j'ai mis un exemple qui va (je l'espère) illustrer ce que je suis en train de faire, ici:

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

Je sais que je peux résoudre ce problème en omettant la <img> élément tout à fait et au lieu de tirer la forme de miniatures dans un centré sur l'image de fond sur l'élément conteneur, mais, si c'est possible, j'aimerais garder le <img> les éléments dans la page.

Merci pour toute aide ou des pointeurs vous pouvez fournir!

Edit: je suppose que je devrais noter que l'idéal d'une solution fonctionne dans IE 6+ et les navigateurs modernes, mais aucune solution qui fonctionne dans IE 9+ et les autres navigateurs modernes (récent WebKit, Gecko, etc.) seront acceptés avec plaisir.

source d'informationauteur Will McCutchen