Ebeveyn CSS Kuralını geçersiz kıl 'taşma: gizli'

Question

Resim özeti olarak gizlenmiş bir taşma ile bir div üzerinde küçük resimler gösteriyorum.

Bir minik resmi tıklattığımda, görüntünün daha büyük görüntüsüyle değiştiririm (bu da bir zoom efekti oluşturur) ancak görüntülerin bir kısmı oldukça büyük olduğu için, ana bölümüyle kesilir.

Bu özel küçük resmin ana kuralına meydan okumasını ve çıkıp 100%self numarasını göstermesini istiyorum. Bu soruyu çarpmak için

---

^{benim için ana nedeni,/get iyi bir çalışma çözüm sağlamaktır. En iyisi this.}

Answer 1

bunu yapmanın en kolay ve daha verimli bir yöntem, işin yapılması için resme aşağıdaki özellik eklemek oldu: (ve yine, fikir div genişliğini ve yüksekliğini ayarlamak değil mi) .

pozisyonu: bu şekilde, üst kural meydan okuyan başka, kap bulana kadar bu sonra

mutlak kabı üzerinden kendi atlar mutlak konumlandırma sahiptir.

Ben bu durumu ve çözümünü göstermek için basit bir demo ^[here] oluşturulan ediyorum.

Answer 2

Tıklamada jquery aracılığıyla css öğesini değiştirmeyi denediniz mi?

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

Büyütülmüş görüntüyü temizlediğinizde css modifikasyonunu geri almak için jquery'yi kullanın.

Bu sizin için herhangi bir nedenden dolayı çalışmıyorsa, büyütülmüş görüntüler için gizli bir div oluşturabilirsiniz. Kaynağı değiştiren ve farklı css öznitelikleri içeren div görüntüleyen bir tıklama olayı oluşturmak için jquery'yi kullanın. Yine, bu tıklamayı tıklama olayıyla paylaş.

Answer 3

ideal div genişliği ve yüksekliği olmalıdır beyan (yani: içerik o boyutlara var karar versin)

$('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'); 

}); 

ayrıca, emin görüntü div rahat olduğundan emin olmak için bu ekleyebilir

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