Re taille différente des images sans distorsion

Toutes les images ont une chose en commun: ils sont tous les 300 ou de 600 pixels de large. Mais les hauteurs variant de 300-900 pixels. Maintenant j'ai besoin d'un petit groupe d'images qui seront utilisées pour suggérer d'autres images de l'utilisateur. Ces informations seront uniquement autour de 100x200 pixels(peut changer). Ma tentative précédente a fait les images diminuer dans le 100x200 ratio d'aspect. J'ai besoin d'elle à se chevaucher, mais l'excès est caché.

Si vous souhaitez que l'excès de s'être caché appliquer la règle CSS: overflow: hidden;

OriginalL'auteur Harry | 2012-05-22

  1. 8

    Essayer quelque chose comme cela http://dabblet.com/gist/2769112

    Le CSS que vous aurez besoin est tout simplement

    .img-container {
    width: 200px; /* whatever set width */
    height: 100px;
    display: inline-block; /* or you could float them */
    overflow: hidden;
}
.img-container img {
    width: 100%;
}

    OriginalL'auteur Ana

  2. 1

    Mettre les images dans un élément d'habillage, comme un DIV, avec une hauteur et une largeur et d'utiliser overflow:hidden.

    Je ne peux pas définir la hauteur que chaque image est différente? Ou voulez-vous dire quand je l'écho je obtenir la hauteur puis le mettre?
    Vous êtes à la définition de la taille de l'emballage, pas les images. Je vous suggère de définir une commune de la hauteur pour les images, dans la balise IMG, et de leur permettre de déborder du récipient si elles sont plus larges que le conteneur.

    OriginalL'auteur Diodeus - James MacFarlane