CodeNewbie Community 🌱

Discussion on: Setting Up Width of Images In CSS

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 😊