HTML/CSS width/height wont change?

Question

<!DOCTYPE html>
<html>

<head>
  <title>HTML, CSS and JavaScript demo</title>

  <link rel="stylesheet" href="profilepage.css">

</head>


<body>
  <!-- Start your code here -->

  <div class="profile-box">
    <div class="bg">
      <img src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
    </div>

  </div>

  <!-- End your code here -->
</body>

</html>

profilepage.css

.bg {
  width: 100%;
  height: 10%;
}

Comes out like this: on my page

What I want is the width to cover the entire first row and the height to be 10% of the page. i.e.

Where the black line ends the img

I've been playing with width and height forever bu nothing is working. The moment I change width something large comes up. Even if I let the width be less. I don't know why width is changing the height. What am I doing wrong?

Make the image a background image. – Heretic Monkey Nov 24 '19 at 22:05 — Heretic Monkey, Nov 24 '19 at 22:05

score 1 · Accepted Answer · edited Nov 24 '19 at 22:54

Percentage heights refer to the height of the immediate parent. If the parent height is not set, the CSS will do nothing. You can either cascade a 100% height setting down from the body tag or you can apply some fixed value to the image tag's immediate parent.

Fixed Value (Uses view height to refer directly to height of the body tag)

<div style="height: 10vh;">
  <img style="max-height: 100%;" src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>

Cascading Height

.bg {
  width: 100%;
  height: 10%;
}

body {
  height: 100%;
}

.profile-box {
  height: 100%;
}

html {
  height: 100%;
}

img {
  max-height: 100%;
  width: 100%;
}

In both cases, we must restrict the image height by the parent class or no changes will take effect.

I used these sources: How to make a div 100% height of the browser window and Make an image to fit its parent dimensions

score 0 · Answer 2 · answered Nov 24 '19 at 23:12

Try this, You need to define height and width of every element otherwise the css don't know which element have what value.

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%; 
            height: 100%;
        }
        .profile-box {
            width: 100%;
            height: 100%;
        }
        .bg {
          width: 100%;
          height: 10%;
        }
        .bg img {
            width: 100%;
            height: 100%;
        }

HTML/CSS width/height wont change?

2 Answers2