miércoles, 30 de noviembre de 2022

Propiedad CSS - image-orientation (orientación de imagen)

La propiedad CSS describe cómo corregir la orientación predeterminada de una imagen .image-orientation

Sintaxis


image-orientation: 0deg;
image-orientation: 6.4deg;     /* Rounded to 0deg */
image-orientation: -90deg;     /* Equivalent to 270deg, its normalized computed value */
image-orientation: from-image; /* Use EXIF data from the image */
image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
image-orientation: flip;       /* No rotation, only applies a horizontal flip */

/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;
  

Valores

from-image

La información EXIF contenida en la imagen se utilizará para rotar la imagen adecuadamente.

<angle>

El <angle> de rotación para aplicar a la imagen. Se redondea al más cercano 90deg( 0.25turn).

flip

La imagen se voltea horizontalmente, es decir, se refleja, después de la rotación dada por el <angle> valor. Si no <angle> se da, 0degse utiliza.

El <angle> (angulo) El tipo de datos CSS representa valores de ángulo. Los ángulos positivos representan ángulos rectos. Los ángulos negativos representan ángulos izquierdos. Su sintaxis es tipo de datos seguido inmediatamente por la unidad (grado, grado, rad o giro). Al igual que para cualquier dimensión de CSS no hay espacio entre el literal de la unidad y el número.

Sintaxis formal


  from-image |  | [? flip]
   

Descripción

La propiedad CSS describe cómo corregir la orientación predeterminada de una imagen .image-orientation

Nota:
  • Esta propiedad no está destinada a realizar una rotación arbitraria en una imagen, sino a corregir una orientación errónea. Es por eso que se redondea al cuarto de vuelta más cercano.
  • De manera similar, esta propiedad no está destinada a manejar el diseño -> cambio de retrato. Como .image-orientation afecta solo a las imágenes, no funcionará: los cambios deben ocurrir en el nivel de diseño.
image-orientation

Compatibilidad del navegador

image-orientation

image-orientation



Fuentes de consulta: https://reference.codeproject.com/css/image-orientation



¡¡Aprender es interesante y divertido!!


Salu2 y bendiciones,
Atte, Angel Paz
Duda con el Efecto rayo 71pkhu