Obsoleto

Esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de ser eliminado o que solo se conserve por motivos de compatibilidad. Evite su uso y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para guiar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.

los image-orientationCSS La propiedad especifica una corrección independiente del diseño de la orientación de una imagen. Debería no utilizarse para cualquier otro ajuste de orientación; en cambio, el transform La propiedad debe usarse con el rotate.

Advertencia: Esta propiedad está obsoleta en la especificación. Su funcionalidad se puede mover a propiedades en el

y / o elementos, con la posible excepción de from-image. los flip y los valores se hicieron obsoletos en Firefox 63.

/* keyword values */image-orientation: none;image-orientation: from-image;/* Use EXIF data from the image *//* Global values */image-orientation: inherit;image-orientation: initial;image-orientation: unset;/* Obsolete Values. 
    This deprecated API should no longer be used, but will probably still work.
    
 */image-orientation: 90deg;/* Rotate 90deg */image-orientation: 90deg flip;/* Rotate 90deg, and flip it horizontally */image-orientation: flip;/* No rotation, only applies a horizontal flip */

Sintaxis

Valores

none
No aplica ninguna rotación de imagen adicional; la imagen está orientada como codificada o como dictan otros valores de propiedad CSS.
from-image
Valor inicial predeterminado. los EXIF La información contenida en la imagen se utiliza para rotar la imagen de forma adecuada.
Esta API no se ha estandarizado. Esta API obsoleta ya no debería usarse, pero probablemente seguirá funcionando.
los de rotación para aplicar a la imagen. Está redondeado al más cercano 90deg (0.25turn).
flip Esta API no se ha estandarizado. Esta API obsoleta ya no debería usarse, pero probablemente seguirá funcionando.
La imagen se voltea horizontalmente (es decir, se refleja) después de la rotación dada por el se aplica el valor. Si no es dado, 0deg se utiliza.

Descripción

Esta propiedad está destinada solamente para ser utilizado con el fin de corregir la orientación de las imágenes que se tomaron con la cámara girada. Debería no utilizarse para rotaciones arbitrarias. Para cualquier propósito que no sea corregir la orientación de una imagen debido a cómo fue tomada o escaneada, use un transform propiedad con el rotate palabra clave para especificar la rotación. Esto incluye cualquier cambio dirigido por el usuario a la orientación de la imagen, o cambios necesarios para imprimir en orientación vertical frente a horizontal.

Si se usa junto con otras propiedades CSS, como un , alguna image-orientation la rotación se aplica antes que cualquier otra transformación.

Definicion formal

Valor inicial from-image
Se aplica a todos los elementos
Heredado sí
Valor calculado un , redondeado al siguiente cuarto de vuelta desde 0deg y normalizado, es decir, modulando el valor por 1turn
Tipo de animación discreto

Sintaxis formal

from-image ||[? flip ]

Ejemplos de

Orientación de la imagen a partir de los datos de la imagen

CSS

#imageimage-orientation: from-image;/* Can be changed in the live sample */

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de Imágenes CSS Nivel 3
La definición de ‘orientación de la imagen’ en esa especificación.		 Recomendación candidata Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
image-orientation 81 81 26 No 67 13,1 81 81 26 No 13,4 13,0
flip_and_angle No No 26-63 No No No No No 26-63 No No No

Ver también

  • Otras propiedades CSS relacionadas con la imagen: object-fit, object-position, image-orientation, image-rendering, image-resolution.
  • transform y rotate