Zastąp nadrzędną zasadę CSS: "przepełnienie: ukryte"

Question

Jestem wyświetlaną miniaturką na div z przepełnieniem: ukrytym jako jej atrybut stylu.

Po kliknięciu jednej miniatury zastępuję obraz większym obrazem (który tworzy efekt powiększenia), ale ponieważ niektóre obrazy są dość duże, zostaje odcięty przez podział macierzysty.

Chcę, aby ta konkretna miniatura zasygnalizowała swoją regułę nadrzędną i wyjść i pokazać jej 100%self.

---

^{Głównym powodem, dla mnie, aby wpadać na to pytanie, jest uzyskanie/zapewnienie dobrego roztwór roboczy. Najlepszy znaleziony jest this.}

Answer 1

Najprostszym i bardziej efektywny sposób to zrobić, żeby dodać następującą właściwość na zdjęcie, aby otrzymać pracę .

pozycji: absolutny

po jego bezwzględnego położenia, jego wyskakuje z jego pojemnika do stwierdzenia innym względem opakowania, w ten sposób przeciwstawiając jego zasadę macierzysty.

jestem stworzony prosty demo ^[here] do zilustrowania tej sytuacji i rozwiązanie.

Answer 2

Zakładam, że próbowałeś zmodyfikować element css za pomocą jquery po kliknięciu?

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

Wystarczy użyć jquery, aby przywrócić modyfikację css po wyczyszczeniu powiększonego obrazu.

Jeśli to nie działa z jakiegoś powodu, możesz utworzyć ukryty element div dla powiększonych obrazów. Użyj jquery, aby utworzyć zdarzenie click, które zmienia źródło i wyświetla element div, który zawiera różne atrybuty css. Ponownie ukryj ten element div za pomocą zdarzenia czyszczenia rozliczeń.

Answer 3

idealnie, div nie powinno mieć szerokość i wysokość zadeklarowane (czyli: niech treść zdecydować to wymiary)

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

}); 

dodatkowo można dodać to, aby upewnić się, że obraz jest wygodny w div (i znowu, to pomysł nie ustawić szerokość i wysokość div):

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