CSS 13 💻 image orientation, image rendering, object fit and object position properties

image-orientation → specifies the orientation of an image
values → none, from-image and global values
example → sets the orientation from the image EXIF data
image-rendering → controls how browsers render images
values → auto, crisp-edges, pixelated and global values
example 1 → this value forces the image to be rendered with pixelated edges
example 2 → ensures that the image has sharp edges

object-fit → specifies how the content of an image and video will be resized to fit its container
values → contain, fill, cover, none, scale-down
it has no effect to other replaced elements such as iframe, embed and fencedframe
example 1 → scales the image to fit within the container without distorting its aspect ratio
example 2 → scales and crops the image to fill the entire container while maintaining its aspect ratio
fill → fills its container and even changes the aspect ratio
none → not resized
scale-down → like none or contain, to the smallest version

object-position → sets the alignment of an image, video element within its container
values → top, bottom, left, rights, center, percentage, length values and...
offset values like bottom 20px right 30px
example 1 → positions the image's top left corner at the top left of the container
example 2 → this centers the image both horizontally and vertically within the container
example 3 → positions the image's bottom right corner at the bottom right of the container