CodeNewbie Community 🌱

Cover image for Setting Up Width of Images In CSS
Ayu Adiati
Ayu Adiati

Posted on • Originally published at adiati.com

Setting Up Width of Images In CSS

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.

Top comments (4)

Collapse
 
iamspruce profile image
spruce • Edited

Just a quick tip...
When you set
img {
max-width: 100%;
}
Images that have specific widths or heights are going to look terrible....
<img src="/am-terrible" width="48px" height="48px" />

A quick way to fix this is to remove the max-width property from all images that have specified heights and widths..
Like so...
img[width],
img[height] {
max-width: none;
}

Thank you πŸ˜‰

Collapse
 
adiatiayu profile image
Ayu Adiati

Hi Spruce,
Thank you for your feedback and appreciate the input πŸ˜ƒ
It's nice to learn that there's another way to do this 😊

I cannot see the image that you attached.
Can you send me a code example of your approach?

I tried out my code again and give fixed width and height for the image (half the actual size), also apply max-width of 100%.

img {
  width: 600px;
  height: 332px;
  /*     width: 100%; */
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

And I don't see any problem with it πŸ€”
The img is not getting bigger than its actual size as we expand the window, even though I boost its parent's width to be more than 200%.
Maybe you can send me the picture (or code) again for me to see where it makes the img look terrible?

Thank you πŸ™‚

Collapse
 
iamspruce profile image
spruce

My bad
Am sorry I didn't explain well...
I just gave another "tip of setting images" for other pipo that may need it...
Your example is perfect by the way...
I once had to redesign a website for a client.
I wanted to add some avatars to the about us page


// So I just added the images
// And I set a width and height
<img src="" width="47px" height="48px" />

But when I previewed the page, the avatars where still talking their original sizes...
Well it was because the max-width: 100%; was still pretty active...
So I decided to change the max-width to none whenever I set the width and height inline(in the HTML)
And this worked


 img[width],
 img[height] {
 max-width: none;
}

I just thought this would be a good tip also but I don't know lol
Thanks again Ayu

Thread Thread
 
adiatiayu profile image
Ayu Adiati

Thank you so much for the tip!
I learn something new today 😊