CSS EXAMPLE · WORKING REFERENCE

Responsive Image Card

aspect-ratio, object-fit aur fluid width se responsive image card banao.

Working code

<article class="image-card">
  <img src="course-cover.jpg" alt="Web development course cover">
  <div class="content">
    <h2>Web Development</h2>
    <p>Build responsive websites.</p>
  </div>
</article>

<style>
.image-card {
  width: min(100%, 360px);
  overflow: hidden;
  background: white;
  border: 1px solid #dce8f5;
  border-radius: 16px;
}

.image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.content {
  padding: 18px;
}
</style>
Run Code ▶

Preview

Responsive image area
Web Development

Build responsive websites.

How it works

width: min(100%, 360px) card ko container se overflow hone se bachata hai.

Image par width:100% fluid sizing, aspect-ratio consistent frame aur object-fit:cover frame ko fill karne ke liye crop behavior define karta hai. Actual image ke liye referenced file required hai.

Try Yourself

<article class="image-card">
  <img src="course-cover.jpg" alt="Web development course cover">
  <div class="content">
    <h2>Web Development</h2>
    <p>Build responsive websites.</p>
  </div>
</article>

<style>
.image-card {
  width: min(100%, 420px);
  overflow: hidden;
  border-radius: 20px;
}

.image-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.content { padding: 22px; }
</style>
Try in Playground ▶

Learn this concept

Read related CSS Tutorial →