Si j'ai une image entourée d'un div, comment puis-je faire en sorte qu'elle n'affiche qu'une certaine partie de l'image ?

Question

Si j'ai une image entourée d'un div, comment puis-je faire en sorte qu'elle n'affiche qu'une certaine partie de l'image ?

<div id=#container"><img src="hello.jpg" /></div>

Disons que je veux que l'image n'affiche qu'une largeur de 200px et une hauteur de 200px. Je veux également qu'elle commence à s'afficher à 10 pixels du haut et à 30 pixels de la gauche.

Answer 1

Vous pourriez le placer en tant qu'image d'arrière-plan pour la division, en faire un bloc avec une largeur/hauteur définie et utiliser background-position pour obtenir la position souhaitée.

Answer 2

#container {
    width: 200px;
    height: 200px;
    overflow: hidden
}
#container img {
    margin: -10px 0 0 -30px
}

Answer 3

Si votre <div id="#container"> est absolument positionné, vous pouvez utiliser la propriété clip :

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

L'exemple ci-dessus crée un clip rectangulaire dont le coin supérieur gauche est à 10px du haut et à 30px de la gauche. Son coin inférieur droit est à 210px du haut et à 230px de la gauche (ce qui vous donne 200px de largeur et de hauteur).

Vous pouvez en savoir plus à ce sujet dans cet article .

Answer 4

#container {
    padding-top  : 10px;
    padding-left : 30px;

}
#container img {
    width        : 200px;
    height       : 200px;
}

L'image ne sera pas étirée :

#container img {
    max-width    : 200px;
    max-height   : 200px;
}