March 1Mar 1 Administrators CSS object-position Property CSS object-position Property The CSS object-position property is used together with the object-fit property to specify how an <img> or <video> should be positioned with x/y coordinates within its container. The first value controls the x-axis and the second value controls the y-axis. The value can be a string (left, center or right), or a number (in px or %). Negative values are also allowed. Using the object-position Property Let's say that the part of the image that is shown, is not the part that we want. To position the image, we will use the object-position property. Here we position the image so that the great old building is in center: Example .image-container { width: 200px; height: 300px; border: 1px solid black;}.image-container img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 100%; } Try it Yourself » Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center: Example .image-container { width: 200px; height: 300px; border: 1px solid black;}.image-container img { width: 100%; height: 100%; object-fit: cover; object-position: 15% 100%; } Try it Yourself » CSS Object-* Properties The following table lists the CSS object-* properties: Property Description object-fit Specifies how an <img> or <video> should be resized to fit its container object-position Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.