Ignorar la regla CSS principal de 'desbordamiento: oculto'

Question

Soy mostrar miniaturas en un div con desbordamiento: oculto como su atributo de estilo.

Cuando hago clic en una miniatura, reemplazo la imagen con su vista más grande (lo que crea un efecto de zoom) pero como algunas de las imágenes son bastante grandes, se cortan por su división principal.

Por lo tanto, quiero que esa miniatura en particular desafíe a su regla principal y salga y muestre su 100%self.

---

^{La razón principal para mí, para volcar esta pregunta, es conseguir/proporcionar una solución de trabajo buena. El mejor que se encuentra es this.}

Answer 1

el método más fácil y más eficiente de hacer esto, fue la de añadir la siguiente propiedad a la imagen para realizar el trabajo .

position: absolute

después de que haya posicionamiento absoluto, sus saltos de su envase hasta que encuentra otro recipiente relativo, desafiando así la regla padre.

se creo una demostración sencilla ^[here] para ilustrar esta situación y la solución.

Answer 2

Supongo que has intentado modificar el elemento css a través de jquery al hacer clic?

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

Simplemente use jquery para revertir la modificación css cuando borre la imagen ampliada.

Si eso no funciona para usted por alguna razón u otra, podría crear un div oculto para las imágenes ampliadas. Use jquery para crear un evento de clic que cambie el origen y muestre el div que contiene diferentes atributos de css. De nuevo, oculta ese div con el evento de clic de borrado.

Answer 3

idealmente, el div no debería tener anchura y altura declarado (que significa: que el contenido de decidir sus dimensiones)

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

}); 

Además, puede agregar esto a asegurarse de que la imagen quede tirante en el div (y de nuevo, es la idea no se establece la anchura y la altura de la div):

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