-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
object-position
?The CSS object-position
property specifies the alignment (position) of replaced content like images or videos inside their container when the content is resized using object-fit
(especially with cover
or contain
).
It controls which part of the image is visible when it is cropped or fitted.
img {
object-position: 50% 50%; /* horizontal vertical */
}
First value: horizontal position (left to right)
Second value: vertical position (top to bottom)
Value Type | Description | Examples |
---|---|---|
Keywords | Position by keywords | top , bottom , left , right , center |
Percentages | Percentage positions relative to container | object-position: 25% 75%; |
Length units | Pixels, em, rem, etc. | object-position: 10px 20px; |
object-position: 50% 50%;
— centers the content horizontally and vertically.
img {
object-fit: cover;
object-position: center;
}
img {
object-fit: cover;
object-position: left top;
}
img {
object-fit: cover;
object-position: 30% 70%;
}
img {
object-fit: cover;
object-position: 10px 20px;
}
object-position
?When using object-fit: cover
or contain
, and you want to control which part of the image remains visible.
For cropping images with focus on important areas (like faces).
Adjusting image position inside fixed containers without stretching.
Q1. Center an image with object-position
.
Q2. Align image top-right inside its container.
Q3. Position image 25% from left and 50% from top.
Q4. Use pixels to position image 15px from left and 30px from top.
Q5. Combine object-fit: cover
with object-position: bottom center
.
Q6. Align image to bottom-left corner.
Q7. Use object-position
to show the upper-left quarter of an image.
Q8. Position image using keywords right
and center
.
Q9. Set object-position
to 0 0
(top-left).
Q10. Adjust image position responsively with media queries.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)