Come faccio a interrompere la visualizzazione di un'immagine al di fuori del div

Question

Considerate questo codice ...

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black"> 
    <div id="inner"> 
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg"> 
    </div> 
</div> 

Che stile (s) ho bisogno di aggiungere per fare in modo solo in alto a sinistra dell'immagine è visibile?

Nota, non desidero utilizzare un'immagine di sfondo perché la domanda riguarda davvero le div, che ci crediate o meno, ma il coniglio non fa parte della mia applicazione. Oh e nella "vita reale" non userei i css in linea.

Answer 1

div#outer { overflow:hidden; }​ 

demo qui: http://jsfiddle.net/J34aJ/

Answer 2

E 'semplice come questo:

overflow: hidden; 

Answer 3

riscrivere il vostro stile div esterno da applicare overflow:hidden

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow:hidden;"> 
     <div id="inner"> 
     <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg"> 
     </div> 
    </div> 

Answer 4

Aggiungi overflow: hidden al #outer regola: http://jsfiddle.net/saluce/qJWte/

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow: none"> 
    <div id="inner"> 
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg"> 
    </div> 
</div>​ 

Answer 5

Si può perdere il #inner div e aggiungere overflow: hidden; al #outer div.

#outer { 
    overflow: hidden; 
}