CSS Auto Resize an Image Inside a Div Container

[@drgblade9390]

Thankyou very very much i spend an hour to do this before watching your video.

[@webmastercampus]

Welcome!

[@davi48596]

Thank you so much, I always used to struggle and spent some time to discover what is really the best solution to this image problem 😄

[@webmastercampus]

Glad it helped!

[@NaranjaNad]

That 'max width' thing helped me a lot thank you so much!!!!!

[@webmastercampus]

Thank You!

[@mrsilvadecals]

Nice video. Even if you don't apply the size of the div, with the img {max-width: 100%;} is good enough for the image to be fluid or resize depending on the size of the window or device width.

[@webmastercampus]

Good point!

[@stmobile453]

short and straight to the point, thank you

[@webmastercampus]

Thank You!

[@OO-ll8hi]

Thank you, i was stressing out.

[@webmastercampus]

You are welcome!

[@mdfamacion9513]

thank you! this is really helpful

[@MsAlexis]

Thanks so much

[@rizzgod36]

thanks g you clutched up

[@webmastercampus]

Always

[@clashfamily8614]

Very very much thank u 😊

[@webmastercampus]

Welcome!

[@yourchoice4162]

thank you sir ...its help me more ....thank u very very much🥰🥰

[@webmastercampus]

Welcome!

[@prasiddhabhattarai3411]

god bless you thank you soooooooooooooo muchhhhh

[@webmastercampus]

You Welcome 🙂

[@SmilingHidingCat-ir6dg]

SHORT AND SWEET ♥️

[@webmastercampus]

Thank You!

[@Abcd-coding]

Thanks it's really useful for me

[@webmastercampus]

Welcome 😊

[@ionutfelicitari9328]

thank you

[@webmastercampus]

You're welcome

[@adeosunadeyanju1549]

Thank you bro

[@webmastercampus]

Welcome

[@AkiHan.12_369]

Thanks you so much but if you don't mind I want learn about logic behind this I mean why not with just height and width why after applying percentage it start working??? Why

[@webmastercampus]

So max-width means the maximum width it can be is 100%. So if an image is 500px wide, and the screen is 1000px then the image will be 500px wide. But if the screen is 450px, then the image will be 450px as well, as the maximum width it can be is 100%. This will be same for max-height.

[@AkiHan.12_369]

@@webmastercampus 😊☺️

[@atul6224]

thanks man u r grt...

[@webmastercampus]

So nice of you

[@UnderscoreGoblin]

Nice! Although, I'm trying to round the photo now with border-radius but it doesn't seem responsive. Anybody have a solution?

[@muhammadikram139]

What if we set the width of div 100%?

[@davidnnacheta]

Thank you so much

[@webmastercampus]

You're most welcome

[@m12652]

Take into account that according to Google Lighthouse your images should already be the correct size to be displayed. Adjusting the size client side will result in points being deducted.

[@webmastercampus]

You are right but I was explaining the concept without taking img size into consideration. May be I will create a new video with detail explanation.

[@kazim1954]

Can you make a resizable rectangle in css and it should at the same time display the size in inches
Let me know please
Thanks

[@drttbag]

thank you so muchhh

[@webmastercampus]

You're welcome!

[@webmastercampus]

Code URL: www.webmastercampus.com/css-auto-resize-an-image-inside-a-div-container/

[@mazuki7602]

it doesnt work. I want to make it a background image thats 700px of height and a width of 100% but when i copied ur vid my image didnt display 100% of its width

[@TheMatter-xd1ts]

tahnk you your a saviour just sub!

[@webmastercampus]

Welcome

[@zayed1747]

thanks a lot

[@webmastercampus]

You are most welcome

[@sajidhakeem8180]

thanks man

[@webmastercampus]

Happy to help.

[@shreyabajpai6247]

Thankyou

[@webmastercampus]

Welcome!

[@ajalimagno4542]

thanks for thiiis! awesome 😇

[@webmastercampus]

You're welcome 😊

[@deepaksinghlodhi123]

sir let we have to take image height 500px but image height not more than 200px how to solve it with out using min-width in div and image please tell sir i m new in this field

[@webmastercampus]

Try to use as background Image. Following is a 200px image and I called it as background image. Explore more about background-size with cover, 100%, 100vw 100vh.

.bannerImage {
width: 500px;
height: 300px;
border: 1px solid black;
background: url(images.unsplash.com/photo-1518259102261-b40117eabbc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80) no-repeat;
background-size: 100%;
}

[@kumudstar7339]

Thank youuuuuu❤❤❤

[@webmastercampus]

Welcome

[@nemeconcept]

Wow

[@webmastercampus]

Thank You!

[@nnamdiallen]

Thank you 😭

[@webmastercampus]

You're so welcome!

[@CloverFieldKingdom]

It didn't work how come :( ?

[@webmastercampus]

Paste your code in comment or share github link and I will try to help you.

[@billisbro158]

Great, short video! your explanation was clear and easy to follow (:

[@webmastercampus]

Glad it was helpful!

[@FastEnglish4u]

I can't understand your accent

[@ALOKKUMAR-qz3qt]

Turn on the subtitles bro

[@brightasinde7034]

thank you

[@webmastercampus]

Welcome!

[@TheSamwise61]

thank you