Working With Images and Cards

Images and cards appear on almost every site. Once you can make images behave and assemble a card, you can build most of a real page. This lesson combines everything so far.

Responsive images

The golden rule: <code>img { max-width: 100%; height: auto; }</code>. This makes images shrink to fit their container and never overflow, while keeping their proportions.

<div class="frame"><img src="https://picsum.photos/600/300" alt="Demo"></div>

.frame{max-width:320px}
img{max-width:100%;height:auto;display:block;border-radius:10px}

object-fit for consistent thumbnails

When images must be a fixed size (like thumbnails), <code>object-fit: cover</code> fills the box without distortion by cropping nicely.

Building a card

A card combines a background, padding, rounded corners, a subtle shadow and content. The <code>box-shadow</code> property adds depth: <code>box-shadow: 0 8px 24px rgba(0,0,0,.1)</code>.

<div class="card"><img src="https://picsum.photos/400/200" alt=""><div class="body"><h3>Card title</h3><p>A short description.</p></div></div>

.card{max-width:280px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.card img{width:100%;height:140px;object-fit:cover;display:block}
.body{padding:16px}
.body h3{margin:0 0 6px}
.body p{margin:0;color:#555}

img { width: 600px; }

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