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

13 – image-orientation, object-fit and object-position properties

<img class=".from-image" src="oriole.jpg" alt="Orientation taken from the image" />
<img src="oriole.jpg" alt="none" />
<img class="image-pixelated" src="your-image.jpg" alt="Your Image">
<img class="image-crisp" src="your-image.jpg" alt="Your Image">
<p><span class="image-contain"><img src="path/to/your/image.jpg" alt="Example Image 1" class="contain"></span></p>
<p><span class="image-cover"><img src="path/to/another/image.jpg" alt="Example Image 2" class="cover"></span></p>

<p class="image-position"><img src="path/to/your/image.jpg" alt="Example Image 1" class="top-left"></p>
<p class="image-position"><img src="path/to/another/image.jpg" alt="Example Image 2" class="center-center"></p>
<p class="image-position"><img src="path/to/yet/another/image.jpg" alt="Example Image 3" class="bottom-right"></p>

img{
    width: 100px;
}

.from-image {
  image-orientation: from-image; orientation from image
}

.image-pixelated {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    image-rendering: pixelated; 
}

 .image-crisp {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    image-rendering: crisp-edges; 
}
.image-contain {
    width: 200px;
    height: 150px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-cover {
    width: 200px;
    height: 150px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

img.contain {
    object-fit: contain; 
    max-width: 100%;
    max-height: 100%;
}

img.cover {
    object-fit: cover; 
    max-width: 100%;
    max-height: 100%;
}

.image-position {
        width: 200px;
        height: 150px;
        border: 1px solid #ddd;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    img.top-left {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: top left; 
    }

    img.center-center {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: center; 
    }

    img.bottom-right {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        object-position: bottom right; 
    }