meet it

fills a frame without squashing the picture.

Give a picture a width and height that do not match its shape and it stretches, like a face in a funfair mirror. object-fit fixes that.

fills the whole box and trims the edges that do not fit. shows the whole picture and leaves empty space instead. The default, fill, stretches.

For card photos, width: 100% plus a fixed height and object-fit: cover gives every card the same neat frame, whatever shape its photo is.

<div class="card">
  <img class="thumb" src="dog.svg" alt="Rex the dog">
  <h3>Rex</h3>
</div>

.card {
  width: 220px;
}
.thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

Press show my page to see it here.

Change cover to fill and watch Rex stretch out of shape.

guess first

`contain` in a long, thin frame. What do you see?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<img src="cat.svg" alt="A cat">

img {
  width: 300px;
  height: 100px;
  object-fit: contain;
  background-color: whitesmoke;
}

your turn

Make the avatars fill their round frames completely, trimming the edges instead of squashing.

the page you’re styling

<img class="avatar" src="cat.svg" alt="Pickles">
<img class="avatar" src="dog.svg" alt="Rex">

your css

Your code

Press show my page to see it here.

fix it

the page you’re styling

<div class="card">
  <img src="tree.svg" alt="A tall pine tree">
  <h3>Pine forest walk</h3>
</div>

your css

Broken code to fix

Press show my page to see it here.

nailed it

new words in your collection

This lesson isn’t saved. A free account remembers every lesson you finish.