¿Cómo hacer que una imagen cambie el tamaño de la altura de las pantallas con CSS?

A diferencia de muchas personas que desean que una imagen complete toda la pantalla, solo me importa la altura de la imagen. ¿Cómo puedo usar CSS (preferiblemente no JavasScript) para hacer una imagen de cualquier tamaño, llenar hasta el 100% de la ventana de navegador máxima posible altura manteniendo la relación de aspecto de la imagen, el ancho de nuevo tamaño de la imagen con respecto para el navegador no importa.¿Cómo hacer que una imagen cambie el tamaño de la altura de las pantallas con CSS?

estoy trabajando con este código HTML:

<div class="images"> 
    <img/> 
</div>

Muchas gracias!

Fuente

2011-09-09 Mohammad

img { height:100% }

o si quieres ser explícita

img { height:100%; width:auto; }

altura de 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
100% de ancho: http://jsfiddle.net/jmarikle/vz7q2bnk/1/

EDIT:

Esta respuesta necesita un poco de atención . La demo estaba rota y en general era un desastre. Lo actualicé con nuevas imágenes, una regla actualizada para compensar la naturaleza en línea de las imágenes y la altura y el ancho normalizados del cuerpo y los elementos html.

Fuente

2011-09-09 21:12:46

@Mohammad contenta de ayudar :) –

sus enlaces no funcionan ... – Vickel

@Vickel En realidad, parece que jsfiddle podría estar teniendo problemas en el servidor. Recibo un error interno de 500 servidores. –

Esto podría ser una exageración:

.img { 
    position: absolute; 
    height: 100% 
    top: 0; 
    bottom: 0; 
}

Fuente

2011-09-09 21:14:57 Joe

no, esa es la idea correcta, excepto que no necesita el posicionamiento, la parte superior o inferior a menos que esté en un contenedor. La parte importante es dejar ancho automático –

Sí, ya que Joseph dice que la parte superior o inferior no es realmente necesaria. – Mohammad

uh .. por lo que he visto en esto, lo que realmente debe hacer es abordar su contenedor. Este método esencialmente elimina el elemento del contenedor. intente hacer que sus imágenes div 'position: absolute; left: 0; top: 0; height: 100%'. –

También puede ser que desee echar un vistazo a la vh, vw, Vmin y Vmax CSS unidades - que son pretty well supported. Hay un buen artículo que describe cómo lograr el 100% de altura here.

BTW - tenga cuidado con los espacios en blanco: esto puede agregar un margen no deseado. Eliminar el espacio, agregar un flotador o usar el truco font-size: 0 lo solucionará. Además, cuando utilice otros métodos, recuerde configurar height: 100% para los elementos body y html.

Fuente

2014-11-19 20:45:37

¿Cómo hacer que una imagen cambie el tamaño de la altura de las pantallas con CSS?

Respuesta

Cuestiones relacionadas