HTML: muestra una imagen lo más grande posible mientras se conserva la relación de aspecto

Me gustaría tener una página HTML que muestre una sola imagen PNG o JPEG. Quiero que la imagen ocupa toda la pantalla, pero cuando hago esto:HTML: muestra una imagen lo más grande posible mientras se conserva la relación de aspecto

<img src="whatever.jpeg" width="100%" height="100%" />

Simplemente estira la imagen y meta la pata de la relación de aspecto. ¿Cómo resuelvo esto para que la imagen tenga la relación de aspecto correcta al escalar al tamaño máximo posible?

La solución Publicado por Wayne casi obras, excepto para el caso de que usted tiene una imagen de alto y una ventana amplia. Este código es una ligera modificación de su código que hace lo que yo quiero:

<html> 
<head> 
<script> 
function resizeToMax(id){ 
    myImage = new Image() 
    var img = document.getElementById(id); 
    myImage.src = img.src; 
    if(myImage.width/document.body.clientWidth > myImage.height/document.body.clientHeight){ 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
</script> 
</head> 
<body> 
<img id="image" src="test.gif" onload="resizeToMax(this.id)"> 
</body> 
</html>

Fuente

2008-10-02 Adam Pierce

¿Este trabajo de clientWidth funciona en Firefox, etc. o es solo una propiedad de IE? – frankster

Aquí hay una función rápida que ajustará la altura o el ancho al 100% dependiendo de cuál es más grande. Probado en FF3, IE7 & Chrome

<html> 
<head> 
<script> 
function resizeToMax(id){ 
    myImage = new Image() 
    var img = document.getElementById(id); 
    myImage.src = img.src; 
    if(myImage.width > myImage.height){ 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
</script> 
</head> 
<body> 
<img id="image" src="test.gif" onload="resizeToMax(this.id)"> 
</body> 
</html>

Fuente

2008-10-02 03:03:19 Wayne

Este código ** funciona casi ** excepto en el caso en que la imagen es alta y la ventana es ancha. Le hice una pequeña modificación (que agregué a la pregunta original) para tener en cuenta el tamaño de la ventana y ahora hago lo que quiero. Gracias. –

¿no necesita configurar el otro aspecto en 'auto' para que esto funcione? o se supone que es el valor predeterminado? –

Auto es el valor predeterminado. Es lo mismo que no establecer la propiedad. – Wayne

Prueba esto:

<img src="whatever.jpeg" width="100%" height="auto" />

Fuente

2008-10-02 02:48:36

Eso funciona si la página es más alta que la imagen pero no funciona si la imagen es más alta que la página, por lo que no resuelve el problema. –

subirse a cuestas de Franci Penov, si lo que desea es establecer una de ellas. Si tiene una imagen amplia, quiere establecer el ancho al 100% y dejar la altura. Si tiene una imagen larga, desea establecer la altura al 100% y dejar el ancho.

Fuente

2008-10-02 02:51:27

Para ello, JavaScript es su amigo. Lo que desea hacer es cargar la página, recorrer el dom y, para cada imagen (o alternativamente, pasarle una función a una identificación de imagen si solo se trata de una sola), compruebe si el atributo de la imagen es mayor, su altura o anchura.

Esta es la IMAGEN en sí, no la etiqueta.

Una vez que tienes que, a continuación, la altura/anchura correspondiente a la etiqueta a 100% y el otro para auto

algún código útil - todo desde la parte superior de la cabeza, por lo que su experiencia puede variar sobre la sintaxis ..

var imgTag = $('myImage'); 
var imgPath = imgTag.src; 
var img = new Image(); 
img.src = imgPath; 
var mywidth = img.width; 
var myheight = img.height;

Como acotación al margen, esto sería una tarea mucho más fácil en el lado del servidor de las cosas. En el servidor, puedes literalmente cambiar el tamaño de la imagen que se está transmitiendo al navegador.

Fuente

2008-10-02 03:07:46

No necesariamente quiere estirar en una cierta dirección en función de cuál es más grande. Por ejemplo, tengo un monitor de pantalla ancha, por lo que incluso si es una imagen más ancha que alta, estirarla de izquierda a derecha puede recortar los bordes superior e inferior.

Debe calcular la relación entre el ancho y alto de la ventana y el ancho y alto de la misma. El más pequeño es tu eje de control; el otro es dependiente. Esto es cierto incluso si ambos ejes son más grandes que la longitud de la ventana respectiva.

<script type="text/javascript"> 
// <![CDATA[ 
function resizeToMax (id) { 
    var img = document.getElementById(id); 
    myImage = new Image(); 
    myImage.src = img.src; 
    if (window.innerWidth/myImage.width < window.innerHeight/myImage.height) { 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
// ]]> 
</script>

Fuente

2008-10-02 03:24:44

probado en IE y Firefox, además de la primera línea se centrará imagen:

<div align="center"> 
<embed src="image.gif" height="100%">

...También grande para preservar la relación de aspecto con cualquier otro valor de tamaño, por lo que no hay más molesto cálculos =)

Fuente

2012-08-17 21:22:04 tito76

También es posible hacer esto con CSS puro usando una imagen de fondo y la propiedad background-size:contain:

<head> 
<style> 
#bigPicture 
{ 
    width:100%; 
    height:100%; 
    background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
} 
</style> 
</head> 

<body style="margin:0px"> 
    <div id="bigPicture"> 
    </div> 
</body>

Este tiene la ventaja de actualizarse automáticamente si el contenedor cambia la relación de aspecto, sin tener que responder al cambio de tamaño de los eventos (los métodos Javascript, tal como se codifican aquí, pueden provocar el corte de la imagen cuando el usuario cambia el tamaño del navegador). El método <embed> tiene el mismo beneficio, pero CSS es mucho más suave y no tiene problemas con las advertencias de seguridad.

Advertencias:

Ningún elemento <img> significa que no hay menú de contexto y sin texto alternativo.
Compatibilidad con IE para background-size:contain es 9+ solamente, y ni siquiera pude conseguir que esto funcione en IE9 (por razones desconocidas).
Parece que todos los background-* propiedades tienen que ser especificados en el mismo bloque de CSS como imagen de fondo, por lo que varias imágenes en la misma página se necesitará cada uno su propio contain, no-repeat y center.

Fuente

2012-10-19 18:00:31 ondovb

No, no necesita especificar todo el 'background- *' en el mismo bloque de CSS. Solo necesita establecer la URL en la propiedad 'background-image' porque' background: url (xxx) 'anula todas las propiedades' background- * '. – Shiva127

La forma más fácil de hacerlo (si es que no es necesario para apoyar IE) es establecer la propiedad CSS para object-fitcontain:

img { object-fit: contain; }

Ver también:

Fuente

2018-01-15 19:47:56

HTML: muestra una imagen lo más grande posible mientras se conserva la relación de aspecto

Respuesta

Cuestiones relacionadas