Imagen de altura variable de centrado vertical manteniendo el ancho / alto máx.

Quiero centrar una imagen de ancho / altura desconocida en una página, mientras me aseguro de que se encoja si es más grande que la página (es decir, use max-width / max-height ).

Intenté usar la display:table-cell método de display:table-cell , pero max-width es ignorado en Firefox para todos los elementos dentro de los elementos declarados con display:table-cell . ¿Hay alguna manera de centrar verticalmente un elemento de altura variable sin usar la display:table-cell ?

Puedo cambiar la marca. JavaScript es aceptable, pero no puedo usar JQuery (ni ninguna otra biblioteca JS).

Esto debería funcionar bastante bien … no es necesario JavaScript 🙂

Vea la demostración funcional en jsFiddle .

CSS

 /* Don't Change - Positioning */ .absoluteCenter { margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; } /* Sizing */ img.absoluteCenter { max-height:100%; max-width:100%; } 

HTML

  

Nota: Esta clase se puede usar para cualquier cosa con bastante facilidad. Si usa esto para algo que no sea una imagen, asegúrese de agregar una regla TAG.absoluteCenter CSS con una max-height max-width y max-width de su elección (donde TAG es la etiqueta HTML que está utilizando [por ejemplo, div.absoluteCenter ] y max-width / max-height es inferior al 100% ).

Prueba algo como esto …

Demostración: http://jsfiddle.net/wdm954/jYnk8/1/

 $(function() { h = $('.img').height(); w = $(window).height(); if (h < w) { $('.img').css('margin-top', (w - h) /2 + "px"); } else { $('.img').height(w); } }); 

(Puedes probar diferentes tamaños cambiando algunos CSS que he comentado).

Aquí hay una forma de javascript: