• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top