-
Hajipur, Bihar, 844101
CSS
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)
CSS Object-fit
🔹 What is CSS object-fit?
The CSS object-fit property specifies how the content of a replaced element (like <img>, <video>, or <iframe>) should be resized to fit its container box.
It controls how the image or video scales and crops to fill the space without distorting the aspect ratio.
🔸 Values of object-fit
| Value | Description |
|---|---|
fill |
Stretches the content to fill the container, ignoring aspect ratio (may distort). |
contain |
Scales content to fit inside container while maintaining aspect ratio (may leave empty space). |
cover |
Scales content to cover the entire container while maintaining aspect ratio (may crop). |
none |
Keeps original size of content, ignoring container size. |
scale-down |
Scales content down to the smaller of none or contain. |
🔸 Example Usage
img {
width: 300px;
height: 200px;
object-fit: cover;
}
This ensures the image covers the container area without distortion, cropping if needed.
🔸 Visual Differences
-
fill: May stretch image, distorting it. -
contain: Shows the whole image with letterboxing (empty space). -
cover: Fills container, cropping overflow. -
none: Shows image at original size, ignoring container. -
scale-down: Likenoneorcontain, whichever is smaller.
Practice Questions
Q1. Use object-fit: cover for a 200x200px image container.
Q2. Use object-fit: contain to show full image inside fixed size div.
Q3. Prevent image distortion using object-fit.
Q4. Use object-fit: fill to stretch image to container size.
Q5. Apply object-fit: none to display image at original size.
Q6. Use scale-down to fit image in container but keep original size if smaller.
Q7. Combine object-fit with fixed height and width on images.
Q8. Create circular images with object-fit: cover.
Q9. Use object-fit for responsive video thumbnails.
Q10. Use object-fit in a flexbox container with fixed image size.
CSS
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)
