Responsive Image Height CSS Tutorial

[@mysterpluszak7953]

I was trying to solve this by myself for 2 hours and found solution nowhere else. Thanks a lot.

[@myrainys]

2 hours? I was looking for this 30 hours!

[@ecophobic]

"the percentage value for padding is based off the parent element's width" thank you

[@wlan2]

Hi. Can you make a video about the same thing, but when you don't know what the image dimensions are? For a user uploaded image or something similar, you don't know what the ratio is or there are multiple, so you can't apply a "fix" padding.

[@NelsonB007]

thanks pal for the tip... I´ve been struggling with those images for quite a long time!

[@marioecg]

This is an epiphany! Thanks mate.

[@positive.stories]

You are a Lifesaver! Amazing Tutorial!!

[@MK-zf6or]

thanks so much, good vibes your way

[@tusharsaini2801]

Thanks you.. Really helpful.

[@milindsankhe7734]

Thanks this is helpful

[@0lo20]

Hello, im struggling with decreasing photo's height and width on my mobile version. I just want this photo to be proportionally smaller on mobile but to leave like it is on desktop version. Couldn't find any solution.. please reply! Thanks!

[@darkraysha3927]

Dankeschön war echt hilfreich

[@HeartSoulLeake]

The image doesn't show. only the BG color

[@ravihashimi3889]

thank you

[@orlamcnamee1982]

OH MY GOD THANK U

[@ghostman2876]

wow

[@efexzium]

bro great video but please open up a Patreon account so if u need a better mic people can donate to your channels patreon and u can start making better videos

[@lycan2494]

ok that breathing is annoying asf ngl

[@thirdstreetnorth]

I couldn't concentrate on the content because of your breathing and gasping... duuuuude this is to good to be busted by such a goofy thing. I hope you fix that, cheers

[@noGFnoMONEY]

Finally i found this great tip. You're a genius

[@johnm3229]

No source code? LOL

[@John223]

saved my ass very much. thank you

[@CavanMitchell]

dude! this was the answer i was searching hours for! thks so much

[@vaggelismanousakis6147]

So if i want to put an image to have "height:50%" of my browser at any time I implement it with your solution ? Thanks in advance!

[@MrRedhawk16]

Man you are Brilliant !

[@kertosyt]

so my brain is furiously asking me right now , what if you want to , set an image height, at 100vh , and width at 100% of the container, but instead of letting the image stretch , you want to set the image to crop according to the size of the container , while respecting the aspect ratio, could it be done by loading a an image that is bigger than the container, set the center of it as the center of the container and have the container hide and show parts of the image as the size changes?

[@Enn99999]

oh my god, you are cool, this is what I have been tackling for more than 2 weeks. Thank you so much

[@michaelhajny1348]

Everything was helpful and I realy appriciated your work but try to work on your breath :)

[@mrdj3z]

Sounds like he has auto mic volume turned on and the mic volume spikes up during the brief moment between talking and breathing.

[@TylerThomas]

so basically padding-top: img(height) / img(width) Is there an auto for this?

[@samamansaray8648]

That teaching breaks off my doubt. I learnt a lot. thank you

[@itech40]

Great content keep it up. Clear neat fast

[@BuckeyeDave1]

Fantastic and Thanks! Fixed the Banner I was working on. Appreciate your efforts sharing this info

[@EGGFlower-]

thank you men, you save my time.

[@atuc7750]

Tks broo very much, it worked

[@gagikavagyan9920]

Thank you it's very useful

[@nahabiz]

Clear and concise! Thanks!

[@vinayuttekar8735]

best video on this topic!

[@bensmith807]

mind is blown!

[@habibiSD]

Amazing Job, big kudos

[@SonGoku-pc7jl]

thanks! good tip! :D

[@ghulamilyas6020]

thanks alot bro

[@TylerThomas]

bravo

[@chinonsoemeji2386]

Thanks

[@aaroncross6075]

Whaaat?! D:

[@marc.laurin]

u r a fkn god m8

[@kamsb2831]

Hi, whenever i do a background image, i try to put an element like a H1 it goes under the image as a new block, how can i put elements on the top of the image?? Thank you

[@amena298]

Kam Sb try this: H1{ position: absolute; top: 0; left: 0; } Also set position relative to parent div. This should put the H1 element on top of the image.

[@efekarahanl5057]

u can add z-index property. element with the biggest z-index will be on top

[@hebertsbonilla7405]

Thank you so much! Pretty nice tip

[@edzm.9421]

This is helpful. Keep it up!

[@anhtaibui4910]

loving it!

[@PolarTitan]

Problem I have with this is I already have a background serving as a parallax effect. So background on top of this just complicates things for me.

[@samrathchauhan1271]

this is a legendary video, wasted 20-30 minutes on other videos but this is the real deal and in just 3 mins ^-^

[@tsu1983]

Thank you for this tutorial.I could not find nowhere solution until I watched this video.

[@krupaluvora1450]

Thankyou so much sir I was trying to solve it from last 3 days but you just solved it in just 3:30 minutes

[@dontewarapperuma9762]

Thanks ....this was very helpful 🖒🖒

[@SanJay-rj5jv]

try to have a control on your breath while speaking. it is annoying to listen like that. otherwise it is good. thank you

[@briangitau7737]

All I heard was mmnnnthaAAA

[@quocminhtrungthach1162]

My god, thank you for this

[@AliKhan-zv6nh]

Thanks You

[@simpleman1770]

Is any way use fr of grid in flex

[@calvitocalvon1711]

good shit

[@matiasrinaldi1538]

Thank you!

[@danyalahmed641]

Although the content is great,but the sound of breathing is quite irritating.

[@MccZerk]

Bro that fucking breathing...

[@aisehibas5915]

Thanks brother !