relacion pixeles mantener formato filmora como cambiar calculadora aspecto html

html - mantener - relacion de aspecto 16 9 en pixeles



HTML: muestra una imagen lo más grande posible a la vez que conserva la relación de aspecto (8)

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 y 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>

Me gustaría tener una página HTML que muestre una sola imagen PNG o JPEG. Quiero que la imagen ocupe toda la pantalla, pero cuando hago esto:

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

Simplemente estira la imagen y arruina 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 publicada por Wayne casi funciona, excepto en el caso en que tienes una imagen alta y una ventana ancha. Este código es una pequeña modificación de su código que hace lo que 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>

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 se trata de una imagen más ancha que alta, estirarla de izquierda a derecha aún 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 imagen. 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>

Para aprovecharse de Franci Penov, sí, solo quiere establecer uno de ellos. 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.

Para esto, JavaScript es tu 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 lo tienes, establece el alto / ancho correspondiente en la etiqueta al 100% y el otro a automático

un código útil, todo desde fuera de mi cabeza, por lo que su kilometraje puede variar según 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 un lado, esta 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.

Prueba esto:

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

Probado en IE y Firefox, más la primera línea centrará la imagen:

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

... también es excelente para conservar la relación de aspecto con cualquier otro valor de tamaño, por lo que no hay cálculos más molestos =)

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

<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>

Esto tiene la ventaja de actualizarse automáticamente si el contenedor cambia las relaciones de aspecto, sin tener que responder al cambio de tamaño de los eventos (los métodos de 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 ningún menú contextual y ningún texto alternativo.
  • Soporte de IE para background-size:contain contains es 9+ solamente, y ni siquiera pude hacer que esto funcione en IE9 (por razones desconocidas).
  • Parece que todas las propiedades background-* deben especificarse en el mismo bloque de CSS que la imagen de fondo, por lo que varias imágenes en la misma página necesitarán su propio contain , no-repeat y center .