Garder l'image en taille d'origine à l'intérieur de petits div

J'ai une image qui est 600x400px, et que vous voulez à l'intérieur d'un petit div de taille 240x200px, mais l'image se rétrécit ou se déforme. Je veux la taille originale de l'image sera centrée dans la plus petite div, ce qui permettrait de masquer une partie de l'image

J'ai écrit cette règle CSS à appliquer à différentes tailles d'image.

.theBox {
   float: left;
   overflow: hidden;
   width: 240px;
   height: 200px;
}

.theBox img {
   display: block;
   height:100% !important;
   width:100% !important;
 }
Je dois vous demander, pourquoi n'êtes-vous pas en utilisant un logiciel comme GIMP ou PhotoShop pour redimensionner les images, de sorte que vous n'avez pas besoin de vous soucier de la distorsion, etc.?
Parce que je ne veux pas créer beaucoup de vignettes, l'image affichée sur ce div est un lien vers un article principal.

OriginalL'auteur Nicoli | 2014-06-16

  1. 5

    Si vous spécifiez un 100% de la taille de votre image.
    Votre image va ensuite prendre 100% de son conteneur.

    La chose que vous voulez est de maintenir votre dossier à sa taille d'origine, afin de ne pas spécifier n'importe quelle taille de votre image.

    overflow:hidden est la touche pour afficher seulement une partie de votre image.

    Si vous voulez toujours avoir le centre de votre image est visible, vous devriez jeter un oeil à cette propriété CSS3 transform:translate(-50%,-50%) avec un bon positionnement.

    Prendre un coup d'oeil à ce jsfiddle et dites-moi si ça peut vous aider.

    Fonctionne parfaitement, merci!
    Voir aussi: Image Redimensionner automatiquement

    OriginalL'auteur morgul

  2. 0

    Pour maintenir le ratio d'aspect, seule la taille d'une dimension, le navigateur de la taille de l'autre pour maintenir le ratio d'aspect. Avec les dimensions que vous avez donné, vous aurez besoin de régler la hauteur pour s'adapter à l'conteneur (par opposition à la largeur) pour ne pas avoir des lacunes:

    .theBox img {
    display: block;
    height: 100%;
}

    Exemple: jsfiddle

    J'ai essayer, mais l'image de la distorsion, on dirait qu'elle est mise à l'échelle seulement en hauteur.
    Il ne devrait pas déformés si une seule dimension est donnée, cependant, il sera recadrée (mais qui est inévitable étant donné les dimensions). J'ai ajouté un jsfiddle exemple à ma réponse.
    Cette solution est également correct, mais l'un de morgul m'a aidé à comprendre ce qui se passait, en tout cas, merci à vous deux!
    Je me rends compte de ma solution, tel qu'il est, n'est pas le centre de l'image. Si les dimensions de l'image reste la même, alors vous pourriez appliquer margin-left:-30px (ou utiliser un pourcentage) de la img afin de le centrer. +1 pour morgul la solution, je pense que l'utilisation transform:translate(-50%) serait la meilleure façon de résoudre ce problème (en fournissant à la prise en charge du navigateur est suffisant pour vous), car elle semble être indépendante de toute les dimensions de l'image.

    OriginalL'auteur MrWhite

  3. 0

    Si vous spécifiez un 100% de la taille de votre image. Votre image va ensuite prendre 100% de son conteneur.
    Afin de maintenir la taille réelle, vous devez écrire une ligne de style comme ceci:
    style="width: auto"

    OriginalL'auteur rahgozar