CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Height CSS Percent Not Working

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" />

Upvotes: 2

Views: 2183

Answers (3)

James
James

Reputation: 323

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>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

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.

Upvotes: 4

Usman_Enterprise_Developer
Usman_Enterprise_Developer

Reputation: 120

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

Upvotes: 0

Related Questions