• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Image Styling

← Previous Next →

🔹 What is CSS Image Styling?

CSS Image Styling involves using CSS properties to control the appearance, size, shape, and behavior of images on a webpage. This helps create visually appealing and responsive layouts.

🔸 Common CSS Properties for Images

Property Description Example
width Set image width img { width: 100%; }
height Set image height img { height: 200px; }
max-width Max width to keep image responsive img { max-width: 100%; }
border-radius Round image corners img { border-radius: 10px; }
object-fit How image fits into container (cover, contain) img { object-fit: cover; }
box-shadow Add shadow effects img { box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
filter Apply effects like blur, grayscale img { filter: grayscale(50%); }
opacity Set transparency img { opacity: 0.8; }
border Add borders img { border: 2px solid black; }
float Position image left or right img { float: right; }

🔸 Example: Responsive Rounded Image with Shadow

img.profile {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

🔸 How object-fit Works

  • fill: Default, stretches image to fill container

  • cover: Fills container, cropping if necessary

  • contain: Fits inside container, preserving aspect ratio

  • none: Original size

  • scale-down: Smaller of none or contain

Practice Questions

Q1. Make all images responsive with max-width 100%.

Q2. Create a circular profile picture with 100px diameter.

Q3. Add a 5px solid red border to images.

Q4. Apply a subtle shadow to product images.

Q5. Make images grayscale on hover.

Q6. Float images to the left with 10px margin.

Q7. Use object-fit: cover on a fixed-size image container.

Q8. Set image opacity to 0.7 on hover.

Q9. Add rounded corners of 15px radius to all images.

Q10. Use filter: blur(2px) on background images.

CSS Image Styling Quiz

Q1: Which property rounds the corners of an image?

A. border
B. border-radius
C. box-shadow
D. opacity

Q2: What does object-fit: cover; do?

A. Stretches image without maintaining aspect ratio
B. Shows entire image without cropping
C. Fills container by cropping excess parts
D. Scales image down only

Q3: How do you make images responsive to container size?

A. Set fixed width and height
B. Use float
C. Use max-width: 100%; height: auto;
D. Use opacity

Q4: Which property adds shadow effects to images?

A. filter
B. opacity
C. box-shadow
D. border

Q5: What does filter: grayscale(100%) do?

A. Makes image transparent
B. Adds blur effect
C. Converts image to black and white
D. Inverts colors

Q6: Which CSS property controls image transparency?

A. filter
B. opacity
C. border
D. float

Q7: How do you make an image circular?

A. border: circle;
B. border-radius: 50%;
C. shape: circle;
D. circle: true;

Q8: Which property helps control how an image fits into its container?

A. background-size
B. object-fit
C. float
D. margin

Q9: What does float: right; do?

A. Centers the image
B. Moves image to the left
C. Moves image to the right with text wrapping
D. Hides the image

Q10: Which property is used to blur an image?

A. opacity
B. filter: blur()
C. box-shadow
D. border-radius
← Previous Next →
Login
Go Back Top