Why the container does not work?
Hi everyone, I need clarification about why the container does not limit the image size. I've read some articles that say the width of image should be 300px at this example.
https://codepen.io/CodingTrain_1/pen/PoXrEOV
4 Replies
an image by default takes it's original size (width/height). If you want to limit it to the container, you'll have to set the max-width of that image to 100%.
I see you have set up a css rule for .pic, but you are not using it in the <img> as class
Thank you. I understand that if you set a width on <img> it will works, so the container or upper level will not set a limitation to the <img>?
yea, the image has no other place to go so it will overflow the container.
it's a common thing for devs to (by default) set all images to max-width: 100% to overcome this issue. Then they will be limited to the parents size
Thank you very much, I will note it 