DEV Community

loading...
Cover image for Setting Up Width of Images In CSS

Setting Up Width of Images In CSS

adiatiayu profile image Ayu Originally published at adiati.com ใƒปUpdated on ใƒป2 min read

Hello Fellow Codenewbies ๐Ÿ‘‹

You probably use px or em to set up the size of your image in CSS.
Well, I did.

But there is a good practice that I learned recently on how to set up the size of images, particularly the width.

Percentage is better to be used when we want to set the width of an image.

Let's take a look at this example.
In this example, we set the width of the image to 100%.

Oops.
Are you seeing a blurred image?
Maybe now you think that this image has bad quality?

The image has a relatively small resolution of 800 x 532 pixels.
What will happen if we expand the size of an image to be more than its own size?
Precisely! The quality will be reduced and we start to see pixels.

So it is not the image that has bad quality, but percentage as one of the relative CSS units makes the width of the image relative to its parent.

Setting up the width to 100% to the image means that the width of the image is as big as the width of the parent, which in this example, we've set the parent's width to 200%.

What should we do now?

We use the max-width instead of width and set it to 100%.

img {
  max-width: 100%; 
}

Enter fullscreen mode Exit fullscreen mode

We cannot change the quality of an image.
But when we work with images, especially images with relatively small-resolution, we better keep their original resolution to maintain their quality.

By setting max-width to 100% to an image, we are setting the maximum width to 100% of its own size.
So, the image would never get bigger than it is supposed to be even though the width of its parent gets bigger.

Conclusion

  • When we work with images, it's a good practice to use max-width instead of width to maintain the quality of the image.

Discussion (6)

pic
Editor guide
Collapse
anduser96 profile image
Andrei Gatej

Thanks for sharing!

By setting max-width of 100% to an image, we are setting the maximum width to 100% of its own size

I've read that: when the value is provided as a percentage, it is relative to the width of the containing block. So, in this case, the containing block refers to the current element, and not to its parent?

Thank you!

Collapse
adiatiayu profile image
Ayu Author • Edited

Thank you for reading and the feedback, Andrei!

Yes, the containing block refers to the current element.

Let's put aside the percentage for a while and see this with a fixed value of px.
If you scroll down to the example part in the link that you provide, in the "Using Fixed Value", it is explained that

[...] the width of the div tag can not exceed 200px.

This means that when we have a screen with a width of 640px, the width of the div will not getting bigger than 200px (its maximum value).

The explanation of the percentage example also the same.

[...] the width of the div can not exceed 90%.

From here we can see that max-width relatives to the current element.

Hope this helps ๐Ÿ˜Š

Collapse
anduser96 profile image
Andrei Gatej

Makes sense! Thank you very much

Thread Thread
adiatiayu profile image
Ayu Author

Anytime ๐Ÿ˜„

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you for this helpful tip๐Ÿ™Œ๐Ÿ™Œ๐ŸŒน๐ŸŒน

Collapse
adiatiayu profile image
Ayu Author

I'm happy that it's helpful for you! ๐Ÿ˜„