Skip to main content
Practice

Adjusting Image Width and Height

Let's adjust the width and height of an image.

You can set an element's width and height using the width and height properties.


width​

Specifies the width of an element, which can be set using units such as pixels (px) or percentages (%).

For example, width: 300px; sets the element's width to 300 pixels.


height​

Specifies the height of an element.

Similarly, you can use units such as pixels (px) or percentages (%) to set the value.

For example, height: 200px; sets the element's height to 200 pixels.

The following CSS code sets the width and height of the profile-image class to 150px each.

Setting Image Width, Height, and Border Properties
.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

In the next lesson, we will add animation effects to move the profile image up and down.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.