Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Adjusting Image Width and Height

Let's explore how to change the width and height of an image.

When setting the width and height of an element, use the width and height attributes.


width​

This attribute specifies the horizontal length of an element and can use units such as pixels (px) and percentages (%).

For example, width: 300px; sets the horizontal length of the element to 300 pixels.


height​

This specifies the vertical length of an element.

Similarly, you can use units such as pixels (px) and percentages (%) to assign a value.

For instance, height: 200px; sets the vertical length of the element to 200 pixels.

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

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

In the next lesson, we'll add an animation effect to move the profile up and down.

Want to learn more?

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