DEV Community

Discussion on: What CSS tip do you want to share with others?

View post
Collapse
 
vanaf1979 profile image
Stephan Nijman • • Edited

One of my favourite css rule is the following, to make sure images never grow outside their parent element. Simple but very effective in my day to day work. :)

img {
    display: block;
    max-width: 100%;
    height: auto;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
adrianmarkperea profile image
Adrian Perea •

Yes, I use this all the time as well! Very helpful. Thanks, Stephan!

Collapse
 
dzhavat profile image
Dzhavat Ushev •

It's a good one. May I suggest using max-width instead of width. The former will make sure the image doesn't stretch if its width is smaller than the parents'.

Collapse
 
vanaf1979 profile image
Stephan Nijman •

You are absolutely right. I changed the example! :) Thanks.