Get child element to respect parent element Width & Height
I was working on a wepage earlier this week where the 'banner-image' was being cut off the view-port of the screen depending on the browser and size of screen. I thought that by simply converting the Parent Container to 'Height: 100vh' this would make all child elements fit within the parent container that is now set to fit the height of any viewport. This did not work as I intended it to. The banner image was still being cutoff even though the parent container was set to 100vh. Is there a way to do this? JSFiddle Link CSS .parent { width: 100%; background-color: blue; border: 1px dashed blue;