Css content img position

object-position

The object-position CSS property specifies the alignment of the selected replaced element’s contents within the element’s box. Areas of the box which aren’t covered by the replaced element’s object will show the element’s background.

You can adjust how the replaced element’s object’s intrinsic size (that is, its natural size) is adjusted to fit within the element’s box using the object-fit property.

Try it

Syntax

/* Keyword values */ object-position: top; object-position: bottom; object-position: left; object-position: right; object-position: center; /* values */ object-position: 25% 75%; /* values */ object-position: 0 0; object-position: 1cm 2cm; object-position: 10ch 8em; /* Edge offsets values */ object-position: bottom 10px right 20px; object-position: right 3em bottom 10px; object-position: top 0 right 10px; /* Global values */ object-position: inherit; object-position: initial; object-position: revert; object-position: revert-layer; object-position: unset; 

Values

From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.

Note: The position can be set so that the replaced element is drawn outside its box.

Formal definition

Initial value	50% 50%
Applies to	replaced elements
Inherited	yes
Percentages	refer to width and height of element itself
Computed value	as specified
Animation type	a repeatable list of

Formal syntax

object-position =

=
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | ] [ top | center | bottom | ]? |
[ [ left | right ] ] && [ [ top | bottom ] ]

=
|

Examples

Positioning image content

HTML

img id="object-position-1" src="mdn.svg" alt="MDN Logo" /> img id="object-position-2" src="mdn.svg" alt="MDN Logo" /> 

CSS

The CSS includes default styling for the element itself, as well as separate styles for each of the two images.

img  width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; > #object-position-1  object-position: 10px; > #object-position-2  object-position: 100% 10%; > 

The first image is positioned with its left edge inset 10 pixels from the left edge of the element’s box. The second image is positioned with its right edge flush against the right edge of the element’s box and is located 10% of the way down the height of the element’s box.

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Position an Image in CSS?

The image position in CSS can be changed by using CSS properties like object-position property and float property. Object-position property is used to align the position with respect to the x,y coordinates of the image within its container. The float property is used to float an element inside the container toward the left or right side.

Pre-requisite

You should know how to use CSS properties on elements. This article will explain the object-position property and float property with an example that will be easy to understand.

Syntax

1. object-position property: The Syntax of object position property :

position can be a numerical value that specifies the distance from the left of the content box( i.e x axis ) and the distance from the top of the content box (i.e., y-axis). It can also take values like left, right, top, bottom, and initial and inherit them as a string to specify the position.

2. Float property : The Syntax of the float property :

Methods

Method 1: Using object-position Property

object-position property: The object position property is used to position any element within a container to the required position within the container. The < img >element or < video >element are mostly positioned within a container using the object position property.

The Syntax for the object position property is

Position can take numerical , specific string values , percentage , length , and edge offsets values . Some values are shown in the examples below.

Example Let’s see a simple example of object position property and place the img to the top left of the container.

Method 2: Using float Property

float property: float property is used to change the image position in CSS to the extreme left or extreme right of the container. Float is used to position an element only horizontally. The Syntax of the float property is as follows:

left: place the element to the extreme left of the container right: place the element to the extreme right of the container inherit: inherits floating property from its parent (div, semantic element, etc.) none: element is displayed at its original position as it is.

Some examples of float properties values are as follows:

Let’s take an example in which float property is being used on an actual image :

The output of the above HTML code using the float right property is:

Conclusion

• object-property and float properties are used to position an element inside a container.
• object-position property can be used to change the image position in CSS both horizontally as well as vertically within the container of the image.
• float property can be used to change the image position in CSS horizontally within the container of the image.
• The position property in the object position can take both numerical values as well as some specified string values like left, right, top and bottom.
• Float property takes some specific values like left, right, inherit, and none.

Источник

How to position an image anywhere with CSS

We can position an image anywhere inside a parent container. We usually align an image horizontally to left, center and right by using different CSS tricks. But by using position:absolute , we can align an image both horizontally and vertically; not only to center or right but in any position- near top, bottom, left or right edge of a container.

Noted, in this way, not only image, we can also set position of other html elements like p , h , div and so on.

So no more ado. Let’s start to move on practical ground.

How position:absolute works to position an image

To make position:absolute work to position an image anywhere, do the followings:

• Take a container div .
• Style the div with position:relative .
• Style the div with width and height value. You can also set other property if you wish.
• Take img element inside the div .
• Style the img with position:absolute .
• To fix definite position of img ; style the image with top, bottom, left and right property. Noted, set value in any one of Top and Bottom property. Also set value in any one of Left and Right property.
• Image width and height value must be lower than that of div .
• Set other property:value with img if you wish.

Position 1: Align image near top-right

To keep things simple, we’re using inline CSS. First, let’s style the container div:

Now set the image attributes with style:

Position 2: Align image near bottom-right

Position 3: Align image near bottom-left

Position 4: Align image near top-left

Position 5: Align image on center horizontally and vertically

Hope you can position the image in any other places beyond the shown examples by using the defined rules.

Comment, please!!

Источник

CSS The object-position Property

The CSS object-position property is used to specify how an or should be positioned within its container.

The Image

Look at the following image from Paris, which is 400×300 pixels:

Next, we use object-fit: cover; to keep the aspect ratio and to fill the given dimension. However, the image will be clipped to fit, like this:

Example

Using the object-position Property

Let’s say that the part of the image that is shown, is not positioned as we want. To position the image, we will use the object-position property.

Here we will use the object-position property to position the image so that the great old building is in center:

Example

Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:

Example

CSS Object-* Properties

The following table lists the CSS object-* properties:

Property	Description
object-fit	Specifies how an or should be resized to fit its container
object-position	Specifies how an or should be positioned with x/y coordinates inside its «own content box»

Источник