CSS Images & Media

Introduction

Images and media play a major role in modern websites. From product photos and banners to profile pictures, icons, and background visuals, images are everywhere. However, if images are not handled properly in CSS, they can break layouts, slow down pages, and create poor user experience—especially on mobile devices.

In this chapter, you will learn:

• How CSS works with images and media
• Styling images using CSS
• Difference between <img> and background images
• Object-fit and object-position (very important)
• Responsive images and media handling

Images in HTML vs CSS

There are two common ways to use images on a website:

Styling Images with CSS

By default, images behave like inline elements, which often leaves small gaps below them.

img {
  display: block;
}

Responsive Image Rule (Must Know)

This ensures images never overflow their container and scale down on smaller screens.

img {
  max-width: 100%;
  height: auto; 
}

Why height: auto? It maintains the aspect ratio to prevent distortion.

Image Alignment

To center an image horizontally:

img {
  display: block;
  margin: 0 auto;
}

Circular Images

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

Background Images

Used for decorative purposes when layout control is more important than SEO.

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

background-size: cover vs contain

• cover: Fills container, may crop image (Most common).
• contain: Shows full image, may leave empty space.

Shorthand Property

.hero {
  background: url("hero.jpg") no-repeat center center / cover;
}

Object-Fit (Very Important)

object-fit controls how an <img> fits inside its container, similar to background-size.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Values: fill (default), contain, cover, none, scale-down.

Use cover for card images and thumbnails to prevent stretching while filling the area.

Object-Position

Controls which part of the image is visible when cropped.

img {
  object-fit: cover;
  object-position: top; /* or center, bottom, etc. */
}

Responsive Media

Aspect Ratio (Modern CSS)

CSS now supports aspect-ratio for easy sizing of images and videos.

.media {
  aspect-ratio: 16 / 9;
}

Image Filters

CSS allows basic image effects like blur, brightness, contrast, grayscale, etc.

img {
  filter: grayscale(100%);
}

Hover Effects

img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.05);
}

Common Beginner Mistakes & Best Practices