Home » Exercises » CSS Exercises » CSS All Exercises & Assignments » Write CSS to make an image responsive and round

Write CSS to make an image responsive and round

Description: Make one image that shrinks on small screens, and another image shown as a 100px circle without stretching.

Hint:

  • Use max-width: 100%; height: auto; for the first image.
  • Use border-radius: 50% and object-fit: cover for the avatar.

CSS responsive and round image

<style>
  .photo { max-width: 100%; height: auto; }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>

<img class="photo" src="mountain.jpg" alt="Mountain">
<img class="avatar" src="mountain.jpg" alt="Profile picture">

Output in the browser:

Output in the browser

How it works

  • max-width: 100% lets the image become smaller than its real size, but never bigger than its box.
  • object-fit: cover crops the picture to fill the circle, so it does not look squeezed.

Read CSS Images.

Share this post:

Share on LinkedIn
Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.