'ओवरफ्लो: छुपे हुए' के ​​माता-पिता सीएसएस नियम को ओवरराइड करें

Question

मैं ओवरफ्लो के साथ div पर थंबनेल प्रदर्शित कर रहा हूं: इसकी शैली विशेषता के रूप में छिपा हुआ है।

जब मैं एक थंबनेल पर क्लिक करता हूं, तो मैं छवि को अपने बड़े दृश्य (जो ज़ूम प्रभाव बनाता है) के साथ प्रतिस्थापित करता है, लेकिन चूंकि कुछ छवियां काफी बड़ी हैं, इसलिए यह अपने मूल विभाजन से कट जाती है।

तो, मैं चाहता हूं कि वह विशेष थंबनेल अपने मूल नियम को अस्वीकार करे और बाहर निकलें और 100%self दिखाएं।

---

^{मेरे लिए मुख्य कारण है, इस सवाल टक्कर करने के लिए, प्राप्त/एक अच्छा काम कर समाधान प्रदान करना है। सबसे अच्छा पाया गया है this।}

Answer 1

इसका सबसे आसान और अधिक कुशल विधि, काम करने के लिए छवि के लिए निम्न संपत्ति जोड़ने के लिए था ।

स्थिति: पूर्ण

यह करने के बाद अपने कंटेनर से बाहर पूर्ण स्थिति है, इसकी छलांग जब तक यह एक और रिश्तेदार कंटेनर पाता है, इस प्रकार अपनी मूल नियम को ठेंगा।

मैं एक साधारण डेमो ^[here] इस स्थिति और समाधान को वर्णन करने के लिए बनाया है।

Answer 2

मुझे लगता है कि आपने क्लिक पर jquery के माध्यम से तत्व सीएसएस को संशोधित करने का प्रयास किया है?

$(this).css('overflow', 'visible'); 

बस सीएसएस संशोधन वापस लौटने के लिए jQuery का उपयोग करके ऐसी आवर्धित छवि साफ़ करें।

यदि यह किसी कारण या किसी अन्य कारण से आपके लिए काम नहीं करता है, तो आप आवर्धित छवियों के लिए एक छिपा div बना सकते हैं। एक क्लिक इवेंट बनाने के लिए jquery का उपयोग करें जो स्रोत को बदलता है और अलग-अलग सीएसएस विशेषताओं वाले div को प्रदर्शित करता है। फिर, समाशोधन क्लिक घटना के साथ उस div को छुपाएं।

Answer 3

आदर्श, div कोई चौड़ाई और ऊंचाई होना चाहिए घोषित (अर्थ: चलो सामग्री तय यह आयाम है)

$('div_selector_here').on('click',function(){ 

    //try one of the following: 
    //they both stretch the div to the image IF it has no width and height declared: 

    // if width and height are declared for the div, this will leak the image out of the container 
    $(this).css('overflow','visible'); 

    //if width and height are declared for the div, this will add scrollbars 
    $(this).css('overflow','auto'); 

}); 

अतिरिक्त, आपको यह सुनिश्चित छवि div में सुखद है बनाने के लिए इस जोड़ सकते हैं (और फिर, यह विचार आप div करने के लिए चौड़ाई और ऊंचाई निर्धारित नहीं करते हैं):

img{ 
    display:block; 
    width:100%; 
}