CSS Object Position - Detailed Overview

Introduction to CSS Object Position

The object-position property in CSS specifies the alignment of the content inside an img or video element when using object-fit. It allows you to position the content relative to its container.

Examples of Object Position

The following examples demonstrate different values for the object-position property:

Center

Left Top

Right Bottom

Center Left

Center Right

Top

Bottom

<div class="fit-container">

    <img src="https://www.shariqsp.com/image1.jpg" alt="Example Image">

</div>

CSS Used in Examples

The following CSS was used for styling the examples:

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
    font-size: 32px;
}

.container {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    max-width: 800px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.example {
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #fafafa;
    text-align: center;
}

.example img {
    max-width: 100%;
    height: auto;
}

.fit-container {
    width: 300px;
    height: 200px;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
}

.fit-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Default value for demonstration */
    object-position: center; /* Default value for demonstration */
}

/* Additional classes to demonstrate different object-position values */
.fit-container.left-top img {
    object-position: left top;
}

.fit-container.right-bottom img {
    object-position: right bottom;
}

.fit-container.center-left img {
    object-position: center left;
}

.fit-container.center-right img {
    object-position: center right;
}

.fit-container.top img {
    object-position: top;
}

.fit-container.bottom img {
    object-position: bottom;
}