Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS The object-position Property

10 minutes

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS The object-position Property

The CSS object-position property dictates the placement of an <img> or <video> element within its container.

The Image

Observe the image below showcasing Paris, with dimensions of 400×300 pixels.

Subsequently, we apply object-fit: cover; to maintain the aspect ratio and completely fill the specified dimension. Nonetheless, the image will be trimmed or clipped to fit accordingly.

Example

img {
width: 200px;
height: 300px;
object-fit: cover;
}

Using the object-position Property

We’ll utilize the object-position property to adjust the image positioning, ensuring that the iconic old building is centered within the frame.

Example

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}

In this instance, we’ll employ the object-position property to center the image, specifically positioning the renowned Eiffel Tower at the center.

Example

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}