Une image plus grande que son conteneur sans la déformer ?

Bonjour,

Je souhaiterais mettre une image dans une div sans avoir à redimensionner l'image même si elle sort de la div.
L'idée serait que la div se comporterait comme un pochoir qui ne laisserait apparaitre que l'intérieur (extérieur de la photo étant masqué).

Par exemple une div de 200/200 pourait accueillir une image de 300/300, le surplus serait masqué.
Est-il possible de faire ça en css ?
Il me semblait qu'il existait un truc du genre overflow...

Allez un ti croquis pour ceux qui ont pas compris
http://img123.imageshack.us/img123/968/exemplelu8.gif
La partie bleue est celle qui sera cachée sous la div, le reste est apparent.
Merci pour votre aide !
Modifié par pan (29 Oct 2008 - 18:11)

Bonsoir,

Idéalement, tu pourrais recourir à la propriété clip afin de rogner ton image.

En pratique, donc, si ton image de base est un carré de 300px de côté et que tu souhaites n'afficher qu'un carré de 200px centré sur cette base, tu pourras par exemple l'englober dans un paragraphe et styler ce dernier de la manière suivante:

p {clip:rect(50px,250px,250px,50px); position:absolute}

Le support de cette propriété est malheureusement encore limité aujourd'hui.

On pourra alors se tourner effectivement vers de l'overflow pour retrouver un comportement similaire:

p {overflow:hidden; margin:50px 0 0 50px; width:200px; height:200px}
img {margin:-50px 0 0 -50px}

Cdt.,
Benjamin De Cock
Modifié par Benjamin D.C. (29 Oct 2008 - 18:37)

Bonsoir.
Je ne suis qu'un débutant en CSS mais s'il ne s'agit que de cacher l'image qui dépasse de la div on peut peut être utiliser la propriété background-position. En usant de valeurs positives et négative on doit pouvoir afficher le morceau de l'image que l'on veut voir.

Merci pour vos réponses, je vais tester toutes vos solutions, car la finalité est de pouvoir imprimer l'image dans sa taille réelle (donc non coupée).
Voila

Benjamin D.C. a écrit :
Bonsoir,

On pourra alors se tourner effectivement vers de l'overflow pour retrouver un comportement similaire:

p {overflow:hidden; margin:50px 0 0 50px; width:200px; height:200px}
img {margin:-50px 0 0 -50px}

Cdt.,
Benjamin De Cock

Ne semble pas fonctionner avec IE6.
Modifié par pan (30 Oct 2008 - 08:59)