Ne montrant qu'une partie de l'image dans la div à l'aide de css

Ce que j'ai :

J'ai un div de largeur de 200px X 200px

et de l'image à l'intérieur de la taille 400px X 400 px.

Ce que je veux faire :

Je veux montrer qu'une partie de l'image à l'intérieur de la div
Est-il possible en utilisant uniquement css.Si pas ? Alors quelles sont les autres façons

(Note : je ne veux pas définir l'image d'arrière-plan de la div)

Ce que j'ai fait jusqu'à présent :

Violon : http://jsfiddle.net/5Hbr3/1/ 

<div id="sample">
    <img src="image.jpg" /> 
</div>

Je veux afficher une image à partir de 100,100 à 300,300.

et la barre de défilement doit disparaître.

Toute aide sera appréciée.

Grâce

  • Cochez cette violon. Est-ce que vous souhaitez?
  • Karthik: non ..je ne veux pas cela.Simplement overflow :hidden ne fonctionnera pas. Lisez la question à nouveau.**Je veux montrer une partie de l'image.**
  • Utiliser les CSS Image Srites
InformationsquelleAutor Nagesh Salunke | 2013-04-03
  1. 8

    Utilisation position: relative sur l'élément parent et position: absolute sur l'enfant des images.

    http://jsfiddle.net/5Hbr3/3/

    Pour faire disparaître la barre de défilement, utilisez overflow: hidden (comme dans le JSFiddle)

    • Alfred de Xation : le cas échéant de la partie de l'image est affiché.Je n'auront pas besoin d'utiliser overflow : hidden vérifier : jsfiddle.net/5Hbr3/6
    • C'est juste pour s'assurer que les barres de défilement ne montrent pas si vous avez une image plus grande: jsfiddle.net/5Hbr3/7
    InformationsquelleAutor Alfred Xing
  2. 6

    Ici est une méthode pour résoudre votre problème:

    http://jsfiddle.net/5Hbr3/5/

    #sample{
    background: url(image-data.jpg);
    background-position: -100px -100px;
    width: 200px;
    height: 200px;
}

    Cette méthode vous permet d'obtenir le même résultat à partir d'un élément au lieu de deux, et est également croix-navigateur compatible. Je recommande cette approche au lieu de absolument le positionnement de l'image à l'intérieur de la div conteneur.

    • Je l'ai mentionné dans la question que je ne veux pas définir l'image d'arrière-plan de la div.
    • raté - afin d'Alfred de réponse est la voie à suivre dans ce cas
    • Ce qui vous a poussé vers la "je ne veux pas définir l'image d'arrière-plan de la div" attitude? Y at-il des inconvénients d'une telle approche?
    • image balises <map> ne fonctionnent pas lorsqu'il est réglé sur le fond.
    InformationsquelleAutor psychobunny