मैं div के बाहर प्रदर्शित एक छवि रोकूँ कैसे

Question

इस कोड पर विचार करें ...

<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> 

क्या शैली (रों) मैं छवि के यह इसलिए केवल शीर्ष बाएं कोने बनाने के लिए जोड़ने के लिए की जरूरत है दिख रहा है?

कृपया ध्यान दें, मैं, क्योंकि सवाल divs के बारे में वास्तव में है टी एक पृष्ठभूमि छवि का उपयोग करना चाहते हैं, मानो या न मानो, लेकिन खरगोश अपने आवेदन का हिस्सा नहीं है। ओह और "असली जिंदगी" में मैं इनलाइन सीएसएस का उपयोग नहीं करूंगा।

Answer 1

div#outer { overflow:hidden; }​ 

यहाँ डेमो: http://jsfiddle.net/J34aJ/

Answer 2

यह इस रूप में सरल है:

overflow: hidden; 

Answer 3

अपने बाहरी div शैली फिर से लिखने अपने #outer को 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

लागू करने के लिए overflow: hidden जोड़े नियम: 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

आप #inner div खो देते हैं और #outer div को overflow: hidden; जोड़ सकते हैं।

#outer { 
    overflow: hidden; 
}