Skillversitas

CSS Images - Responsive Images and Styling

Controlling how images look with CSS is very important for building professional websites. CSS lets you control image size, how an image fits its container (object-fit), image position, filter effects, border-radius, and much more.

Some key CSS properties for images:
- max-width: 100% — The image does not exceed the container
- object-fit — How the image fits its container (cover, contain, fill)
- object-position — The image's position within the container
- filter — Visual effects like grayscale, brightness, blur
- border-radius — Rounds the image's corners


Code Example

Complete CSS Images

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Images</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      padding: 30px;
      background: #f0f2f5;
      color: #334155;
    }

    h2 {
      margin-bottom: 15px;
      color: #1a1a2e;
    }

    .section {
      margin-bottom: 40px;
    }

    .label {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 10px;
      font-family: monospace;
      background: #e2e8f0;
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .demo-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .demo-box {
      background: white;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    /* ===== RESPONSIVE IMAGE ===== */
    .responsive-img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ===== OBJECT FIT ===== */
    .object-fit-container {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .object-fit-box {
      width: 200px;
      height: 150px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }

    .object-fit-box img {
      width: 100%;
      height: 100%;
    }

    .object-fit-cover img { object-fit: cover; }
    .object-fit-contain img { object-fit: contain; }
    .object-fit-fill img { object-fit: fill; }
    .object-fit-scale img { object-fit: scale-down; }

    .fit-label {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }

    /* ===== OBJECT POSITION ===== */
    .position-box {
      width: 200px;
      height: 150px;
      border-radius: 12px;
      overflow: hidden;
      border: 3px solid #e2e8f0;
    }

    .position-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .pos-center img { object-position: center; }
    .pos-top img { object-position: top; }
    .pos-bottom img { object-position: bottom; }
    .pos-left img { object-position: left; }
    .pos-right img { object-position: right; }

    /* ===== BORDER RADIUS ===== */
    .radius-circle img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
    }

    .radius-rounded img {
      width: 200px;
      height: 130px;
      object-fit: cover;
      border-radius: 16px;
    }

    .radius-custom img {
      width: 200px;
      height: 130px;
      object-fit: cover;
      border-radius: 30px 5px 30px 5px;
    }

    /* ===== FILTER ===== */
    .filter-box {
      width: 200px;
      border-radius: 12px;
      overflow: hidden;
    }

    .filter-box img {
      width: 100%;
      display: block;
    }

    .filter-none img { filter: none; }
    .filter-grayscale img { filter: grayscale(100%); }
    .filter-brightness img { filter: brightness(1.3); }
    .filter-dark img { filter: brightness(0.6); }
    .filter-contrast img { filter: contrast(150%); }
    .filter-blur img { filter: blur(3px); }
    .filter-sepia img { filter: sepia(100%); }
    .filter-hue img { filter: hue-rotate(90deg); }
    .filter-saturate img { filter: saturate(200%); }

    .filter-hover-grayscale img {
      width: 100%;
      display: block;
      filter: grayscale(100%);
      transition: filter 0.5s;
    }

    .filter-hover-grayscale:hover img {
      filter: grayscale(0%);
    }

    .filter-hover-brightness img {
      width: 100%;
      display: block;
      filter: brightness(0.7);
      transition: filter 0.3s;
    }

    .filter-hover-brightness:hover img {
      filter: brightness(1.1);
    }

    /* ===== IMAGE AS BACKGROUND ===== */
    .bg-image {
      width: 100%;
      height: 300px;
      background-image: url('https://picsum.photos/1200/600');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      position: relative;
    }

    .bg-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
      border-radius: 12px;
    }

    .bg-image-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .bg-image-content h3 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    /* ===== IMAGE CARD ===== */
    .image-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .image-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .image-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }

    .image-card-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.5s;
    }

    .image-card:hover .image-card-img {
      transform: scale(1.05);
    }

    .image-card-img-wrapper {
      overflow: hidden;
    }

    .image-card-body {
      padding: 20px;
    }

    .image-card-body h3 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #1e293b;
    }

    .image-card-body p {
      font-size: 14px;
      color: #64748b;
      line-height: 1.5;
    }

    /* ===== AVATAR ===== */
    .avatar-sizes {
      display: flex;
      gap: 15px;
      align-items: flex-end;
    }

    .avatar {
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .avatar-sm { width: 40px; height: 40px; }
    .avatar-md { width: 60px; height: 60px; }
    .avatar-lg { width: 80px; height: 80px; }
    .avatar-xl { width: 100px; height: 100px; }

    .avatar-group {
      display: flex;
    }

    .avatar-group .avatar {
      margin-left: -12px;
    }

    .avatar-group .avatar:first-child {
      margin-left: 0;
    }

    /* ===== IMAGE WITH OVERLAY ===== */
    .img-overlay {
      position: relative;
      width: 250px;
      border-radius: 12px;
      overflow: hidden;
    }

    .img-overlay img {
      width: 100%;
      display: block;
      transition: transform 0.5s;
    }

    .img-overlay:hover img {
      transform: scale(1.1);
    }

    .img-overlay-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 40%, rgba(0,0,0,0.8));
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      color: white;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .img-overlay:hover .img-overlay-overlay {
      opacity: 1;
    }
  </style>
</head>
<body>
  <!-- Object Fit -->
  <div class="section">
    <h2>Object Fit</h2>
    <span class="label">object-fit: cover | contain | fill | scale-down</span>
    <div class="object-fit-container">
      <div class="demo-box">
        <div class="object-fit-box object-fit-cover">
          <img src="https://picsum.photos/400/300?random=1" alt="cover">
          <span class="fit-label">cover</span>
        </div>
      </div>
      <div class="demo-box">
        <div class="object-fit-box object-fit-contain">
          <img src="https://picsum.photos/400/300?random=2" alt="contain">
          <span class="fit-label">contain</span>
        </div>
      </div>
      <div class="demo-box">
        <div class="object-fit-box object-fit-fill">
          <img src="https://picsum.photos/400/300?random=3" alt="fill">
          <span class="fit-label">fill</span>
        </div>
      </div>
      <div class="demo-box">
        <div class="object-fit-box object-fit-scale">
          <img src="https://picsum.photos/400/300?random=4" alt="scale-down">
          <span class="fit-label">scale-down</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Object Position -->
  <div class="section">
    <h2>Object Position</h2>
    <span class="label">object-position: center | top | bottom | left | right</span>
    <div class="demo-row">
      <div class="demo-box">
        <div class="position-box pos-center">
          <img src="https://picsum.photos/400/300?random=5" alt="center">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">center (default)</p>
      </div>
      <div class="demo-box">
        <div class="position-box pos-top">
          <img src="https://picsum.photos/400/300?random=6" alt="top">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">top</p>
      </div>
      <div class="demo-box">
        <div class="position-box pos-bottom">
          <img src="https://picsum.photos/400/300?random=7" alt="bottom">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">bottom</p>
      </div>
      <div class="demo-box">
        <div class="position-box pos-left">
          <img src="https://picsum.photos/400/300?random=8" alt="left">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">left</p>
      </div>
    </div>
  </div>

  <!-- Border Radius -->
  <div class="section">
    <h2>Border Radius</h2>
    <span class="label">border-radius: 50% | 16px | 30px 5px 30px 5px</span>
    <div class="demo-row">
      <div class="demo-box">
        <div class="radius-circle">
          <img src="https://picsum.photos/300/300?random=9" alt="circle">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">Circle (50%)</p>
      </div>
      <div class="demo-box">
        <div class="radius-rounded">
          <img src="https://picsum.photos/400/300?random=10" alt="rounded">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">Rounded (16px)</p>
      </div>
      <div class="demo-box">
        <div class="radius-custom">
          <img src="https://picsum.photos/400/300?random=11" alt="custom">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">Custom (30px 5px 30px 5px)</p>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="section">
    <h2>Filter</h2>
    <span class="label">filter: grayscale() | brightness() | contrast() | blur() | sepia()</span>
    <div class="demo-row">
      <div class="filter-box filter-none">
        <img src="https://picsum.photos/300/200?random=12" alt="none">
        <p style="text-align:center; margin-top:8px; font-size:13px;">none</p>
      </div>
      <div class="filter-box filter-grayscale">
        <img src="https://picsum.photos/300/200?random=13" alt="grayscale">
        <p style="text-align:center; margin-top:8px; font-size:13px;">grayscale</p>
      </div>
      <div class="filter-box filter-brightness">
        <img src="https://picsum.photos/300/200?random=14" alt="brightness">
        <p style="text-align:center; margin-top:8px; font-size:13px;">brightness(1.3)</p>
      </div>
      <div class="filter-box filter-contrast">
        <img src="https://picsum.photos/300/200?random=15" alt="contrast">
        <p style="text-align:center; margin-top:8px; font-size:13px;">contrast(150%)</p>
      </div>
      <div class="filter-box filter-sepia">
        <img src="https://picsum.photos/300/200?random=16" alt="sepia">
        <p style="text-align:center; margin-top:8px; font-size:13px;">sepia</p>
      </div>
      <div class="filter-box filter-saturate">
        <img src="https://picsum.photos/300/200?random=17" alt="saturate">
        <p style="text-align:center; margin-top:8px; font-size:13px;">saturate(200%)</p>
      </div>
    </div>
  </div>

  <!-- Filter Hover -->
  <div class="section">
    <h2>Filter Hover Effect</h2>
    <span class="label">filter transition</span>
    <div class="demo-row">
      <div class="demo-box">
        <div class="filter-hover-grayscale">
          <img src="https://picsum.photos/300/200?random=18" alt="hover grayscale">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">Hover: grayscale → color</p>
      </div>
      <div class="demo-box">
        <div class="filter-hover-brightness">
          <img src="https://picsum.photos/300/200?random=19" alt="hover brightness">
        </div>
        <p style="text-align:center; margin-top:8px; font-size:13px;">Hover: dark → bright</p>
      </div>
    </div>
  </div>

  <!-- Image as Background -->
  <div class="section">
    <h2>Image as Background</h2>
    <span class="label">background-image + background-size: cover + ::before overlay</span>
    <div class="bg-image">
      <div class="bg-image-content">
        <h3>Welcome</h3>
        <p>Bangun website impian Anda</p>
      </div>
    </div>
  </div>

  <!-- Avatars -->
  <div class="section">
    <h2>Avatar</h2>
    <span class="label">border-radius: 50% + object-fit: cover</span>
    <div class="demo-row">
      <div class="demo-box">
        <div class="avatar-sizes">
          <img src="https://picsum.photos/200/200?random=20" class="avatar avatar-sm" alt="sm">
          <img src="https://picsum.photos/200/200?random=21" class="avatar avatar-md" alt="md">
          <img src="https://picsum.photos/200/200?random=22" class="avatar avatar-lg" alt="lg">
          <img src="https://picsum.photos/200/200?random=23" class="avatar avatar-xl" alt="xl">
        </div>
        <p style="text-align:center; margin-top:10px; font-size:13px;">Size: sm → xl</p>
      </div>
      <div class="demo-box">
        <div class="avatar-group">
          <img src="https://picsum.photos/200/200?random=24" class="avatar avatar-md" alt="1">
          <img src="https://picsum.photos/200/200?random=25" class="avatar avatar-md" alt="2">
          <img src="https://picsum.photos/200/200?random=26" class="avatar avatar-md" alt="3">
          <img src="https://picsum.photos/200/200?random=27" class="avatar avatar-md" alt="4">
          <img src="https://picsum.photos/200/200?random=28" class="avatar avatar-md" alt="5">
        </div>
        <p style="text-align:center; margin-top:10px; font-size:13px;">Avatar Group</p>
      </div>
    </div>
  </div>

  <!-- Image Cards -->
  <div class="section">
    <h2>Image Cards</h2>
    <div class="image-cards">
      <div class="image-card">
        <div class="image-card-img-wrapper">
          <img src="https://picsum.photos/600/400?random=29" class="image-card-img" alt="card">
        </div>
        <div class="image-card-body">
          <h3>Alam Indonesia</h3>
          <p>The stunning natural beauty of Indonesia, from Sabang to Merauke.</p>
        </div>
      </div>
      <div class="image-card">
        <div class="image-card-img-wrapper">
          <img src="https://picsum.photos/600/400?random=30" class="image-card-img" alt="card">
        </div>
        <div class="image-card-body">
          <h3>Modern City</h3>
          <p>The rapid development of Indonesia's major cities.</p>
        </div>
      </div>
      <div class="image-card">
        <div class="image-card-img-wrapper">
          <img src="https://picsum.photos/600/400?random=31" class="image-card-img" alt="card">
        </div>
        <div class="image-card-body">
          <h3>Kuliner Nusantara</h3>
          <p> Indonesia's diverse, mouth-watering culinary scene.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Image with Overlay -->
  <div class="section">
    <h2>Image with Hover Overlay</h2>
    <span class="label">position: absolute + opacity transition</span>
    <div class="demo-row">
      <div class="img-overlay">
        <img src="https://picsum.photos/500/350?random=32" alt="overlay">
        <div class="img-overlay-overlay">
          <h3>Image Title</h3>
          <p style="font-size: 13px;">Image description appears on hover</p>
        </div>
      </div>
      <div class="img-overlay">
        <img src="https://picsum.photos/500/350?random=33" alt="overlay2">
        <div class="img-overlay-overlay">
          <h3>Photo Gallery</h3>
          <p style="font-size: 13px;">Click to see more detail</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Code Explanation

max-width & height

The basic principle of responsive images:

img {
  max-width: 100%;    /* Does not exceed the container */
  height: auto;       /* Height adjusts proportionally */
}

This ensures the image does not overflow the container and stays proportional.

object-fit

Controls how an image fits a fixed-size container:

img {
  width: 200px;
  height: 150px;
  object-fit: cover;    /* Fills the container, crops the excess */
}
Value Purpose
cover The image fills the container and is cropped if needed. Most commonly used
contain The whole image is visible; there is empty space if the aspect ratios differ
fill The image is stretched to fill the container. It can look squashed
scale-down Like contain, but does not enlarge the image

object-position

Determines the image's position when object-fit does not fill the entire area:

img {
  object-fit: cover;
  object-position: center top; /* Focus on the top part */
}

Values: center (default), top, bottom, left, right, or custom like 30% 70%.

border-radius

Rounds the image's corners:

/* Perfect circle */
.avatar { border-radius: 50%; }

/* Rounded corners */
.card-img { border-radius: 12px; }

/* Custom per side */
.custom { border-radius: 30px 5px 30px 5px; }

/* Crops overflowing images */
img { border-radius: 12px; overflow: hidden; }

filter

Visual effects applied directly to an image:

/* Grayscale */
img { filter: grayscale(100%); }

/* Brightness */
img { filter: brightness(1.3); }   /* Brighter */
img { filter: brightness(0.5); }   /* Darker */

/* Contrast */
img { filter: contrast(150%); }

/* Blur */
img { filter: blur(5px); }

/* Sepia (vintage) */
img { filter: sepia(100%); }

/* Hue rotation */
img { filter: hue-rotate(90deg); }

/* Filter combination */
img {
  filter: grayscale(50%) brightness(1.1) contrast(1.2);
}

Image as Background

.hero {
  background-image: url('hero.jpg');
  background-size: cover;         /* Fills the area */
  background-position: center;    /* Center position */
  background-repeat: no-repeat;   /* Does not repeat */
  height: 400px;
}

Everyday Use Cases

1. Hero Image with Overlay

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .hero {
      height: 500px;
      background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)),
                        url('https://picsum.photos/1920/1080?random=40');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
    }

    .hero-content h1 {
      font-size: 56px;
      margin-bottom: 20px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .hero-content p {
      font-size: 20px;
      margin-bottom: 30px;
      opacity: 0.9;
    }

    .hero-btn {
      display: inline-block;
      padding: 14px 40px;
      background: #667eea;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 18px;
      transition: background 0.3s, transform 0.3s;
    }

    .hero-btn:hover {
      background: #5a67d8;
      transform: translateY(-2px);
    }
  </style>
</head>
<body>
  <section class="hero">
    <div class="hero-content">
      <h1>Learn CSS from Scratch</h1>
      <p>Master CSS and build your dream website</p>
      <a href="#" class="hero-btn">Start Learning</a>
    </div>
  </section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      padding: 20px;
    }

    .gallery-item {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 1;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }

    .gallery-item:hover img {
      transform: scale(1.1);
    }

    .gallery-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
      display: flex;
      align-items: flex-end;
      padding: 15px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .gallery-item:hover .gallery-item-overlay {
      opacity: 1;
    }

    .gallery-item-overlay span {
      color: white;
      font-weight: 600;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=50" alt="Gallery 1">
      <div class="gallery-item-overlay"><span>Pemandangan</span></div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=51" alt="Gallery 2">
      <div class="gallery-item-overlay"><span>City</span></div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=52" alt="Gallery 3">
      <div class="gallery-item-overlay"><span>Portrait</span></div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=53" alt="Gallery 4">
      <div class="gallery-item-overlay"><span>Abstract</span></div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=54" alt="Gallery 5">
      <div class="gallery-item-overlay"><span>Makanan</span></div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=55" alt="Gallery 6">
      <div class="gallery-item-overlay"><span>Alam</span></div>
    </div>
  </div>
</body>
</html>

3. Team Member Cards

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .team-section {
      padding: 40px 20px;
    }

    .team-section h2 {
      text-align: center;
      font-size: 32px;
      margin-bottom: 40px;
      color: #1e293b;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;
      max-width: 900px;
      margin: 0 auto;
    }

    .team-card {
      text-align: center;
      background: white;
      border-radius: 16px;
      padding: 30px 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.06);
      transition: transform 0.3s;
    }

    .team-card:hover {
      transform: translateY(-5px);
    }

    .team-card img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #eef2ff;
      margin-bottom: 15px;
      transition: border-color 0.3s;
    }

    .team-card:hover img {
      border-color: #667eea;
    }

    .team-card h3 {
      font-size: 18px;
      margin-bottom: 5px;
      color: #1e293b;
    }

    .team-card .role {
      color: #667eea;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 12px;
    }

    .team-card p {
      font-size: 13px;
      color: #64748b;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <section class="team-section">
    <h2>Tim Kami</h2>
    <div class="team-grid">
      <div class="team-card">
        <img src="https://picsum.photos/300/300?random=60" alt="John">
        <h3>John Smith</h3>
        <div class="role">Lead Developer</div>
        <p>Full-stack developer with 8+ years of experience.</p>
      </div>
      <div class="team-card">
        <img src="https://picsum.photos/300/300?random=61" alt="Amy">
        <h3>Amy Lee</h3>
        <div class="role">UI/UX Designer</div>
        <p>Creative designer focused on user experience.</p>
      </div>
      <div class="team-card">
        <img src="https://picsum.photos/300/300?random=62" alt="Mike">
        <h3>Mike Williams</h3>
        <div class="role">Product Manager</div>
        <p>Managing products from idea to launch.</p>
      </div>
    </div>
  </section>
</body>
</html>

Conclusion

CSS Images gives you full control over how images look. Key points:

  1. max-width: 100% + height: auto — The foundation of responsive images
  2. object-fit: cover — Most commonly used for cards, avatars, and galleries
  3. object-position — Focus on the desired area of the image
  4. border-radius: 50% — Creates circular avatars
  5. filter — Visual effects like grayscale, brightness, sepia
  6. Background image — For hero sections with an overlay

Combining these properties lets you create images that are responsive, interactive, and professional.