toda - imagen pantalla completa css

Imagen receptiva a pantalla completa y centrada: mantiene la relación de aspecto, no supera la ventana

Question

Así que quiero que se muestre un img

• lo más grande posible (rellenar el ancho cuando es horizontal / altura cuando es vertical)
• sin cultivo
• sin sesgo ni estiramiento (relación de aspecto original)
• Centrado tanto vertical como horizontalmente.

Además, el tamaño original de la imagen no se conoce.

He intentado varias opciones diferentes para esto, incluyendo una flexbox (para obtener el centro vertical), pero nada parece marcar todas las casillas.

Lo ideal sería que esta sea una solución totalmente CSS, por supuesto, pero también he estado investigando algunos JS.

Gracias

Answer 1

Podrías usar un div con una imagen de fondo y esta propiedad CSS3:

background-size: contain

Puedes ver un ejemplo en:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

Para citar a Mozilla:

El valor de contención especifica que, independientemente del tamaño del cuadro que contiene, la imagen de fondo debe escalarse de modo que cada lado sea lo más grande posible, sin exceder la longitud del lado correspondiente del contenedor.

Sin embargo, tenga en cuenta que su imagen se ampliará si el div es más grande que su imagen original.

Answer 2

jsFiddle Demo

Para centrarlo, puede utilizar la técnica que se muestra aquí: Centrado absoluto .

Para hacerlo lo más grande posible, dale el max-width max-height del 100% .

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

Answer 3

yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

y asegúrese de que no haya etiquetas principales con posición: relativa en ella