📪Object Position

Object Position Classes

.object-top-left

Sets the object-position property to top left, positioning the content at the top left corner of its container.

CSS equivalent: object-position: top left;

Example usage:

<img src="image.jpg" class="object-top-left" alt="Image">

.object-top-center

Sets the object-position property to top center, positioning the content at the top center of its container horizontally and at the top vertically.

CSS equivalent: object-position: top center;

Example usage:

<img src="image.jpg" class="object-top-center" alt="Image">

.object-top-right

Sets the object-position property to top right, positioning the content at the top right corner of its container.

CSS equivalent: object-position: top right;

Example usage:

<img src="image.jpg" class="object-top-right" alt="Image">

.object-center-left

Sets the object-position property to center left, positioning the content at the center left of its container horizontally and at the center vertically.

CSS equivalent: object-position: center left;

Example usage:

<img src="image.jpg" class="object-center-left" alt="Image">

.object-center-center

Sets the object-position property to center center, positioning the content at the center of its container both horizontally and vertically.

CSS equivalent: object-position: center center;

Example usage:

<img src="image.jpg" class="object-center-center" alt="Image">

.object-center-right

Sets the object-position property to center right, positioning the content at the center right of its container horizontally and at the center vertically.

CSS equivalent: object-position: center right;

Example usage:

<img src="image.jpg" class="object-center-right" alt="Image">

.object-bottom-left

Sets the object-position property to bottom left, positioning the content at the bottom left corner of its container.

CSS equivalent: object-position: bottom left;

Example usage:

<img src="image.jpg" class="object-bottom-left" alt="Image">

.object-bottom-center

Sets the object-position property to bottom center, positioning the content at the bottom center of its container horizontally and at the bottom vertically.

CSS equivalent: object-position: bottom center;

Example usage:

<img src="image.jpg" class="object-bottom-center" alt="Image">

.object-bottom-right

Sets the object-position property to bottom right, positioning the content at the bottom right corner of its container.

CSS equivalent: object-position: bottom right;

Example usage:

<img src="image.jpg" class="object-bottom-right" alt="Image">

Dynamic Object Position Classes

You can dynamically adjust the object position using the following pattern-based utility classes:

• .object-position-x-y: Sets the object-position property to a specific pixel value for both the horizontal and vertical positions. Replace x and y with the desired pixel values.

• .object-position-x-yp: Sets the object-position property to a specific pixel value for the horizontal position and a percentage value for the vertical position. Replace x with the desired pixel value and yp with the desired percentage value.

• .object-position-xp-y: Sets the object-position property to a specific percentage value for the horizontal position and a pixel value for the vertical position. Replace xp with the desired percentage value and y with the desired pixel value.

• .object-position-xp-yp: Sets the object-position property to specific percentage values for both the horizontal and vertical positions. Replace xp and yp with the desired percentage values.

Note: In the pattern-based classes, x represents the horizontal position value, y represents the vertical position value, and p represents the percentage value.

Examples of pattern-based utility classes:

<img src="image.jpg" class="object-position-10-20" alt="Image">
<img src="image.jpg" class="object-position-10-50p" alt="Image">
<img src="image.jpg" class="object-position-50p-20" alt="Image">
<img src="image.jpg" class="object-position-30p-70p" alt="Image">

These utility classes allow you to precisely control the position of the content within its container using the object-position property. The percentage value indicated by "p" enables you to set the vertical position proportionally relative to the container's height.