高度CSS百分比不起作用

Question

I'm trying to adjust the height of a picture by a percentage, rather than a pixel. However, when I use height: 30%; it doesn't work, but height: 30px; does work. What am I doing wrong?

My snippet is mind boggingly easy.

 .imagebanner { height: 30%; width: 100%; } 

 <img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" /> 

Answer 1

If you use a percentage value for height , the parent element needs to have a defined height (for example 100%), and this goes up to the body and html, so as a start you can begin with adding

html, body { height: 100%; }

and also give height definitions to all the elements in between body and your image.

Answer 2

Update your browser and then try. Sometimes if you're using old browser. New features of HTML don't work in old browser.

Answer 3

You need to set a 100% height on the parent element.

 .imagebanner { height: 30%; width: 100%; background: red; } .wrapper { height: 200px; width: 200px; background: grey; } 

 <div class="wrapper"> <img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner"> </div>