CODEWITHSUNDEEP
htmlcss
ss sss
ss sss

Reputation: 75

HTML/CSS width/height wont change?

<!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

enter image description here

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

enter image description here

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?

Upvotes: 0

Views: 2413

Answers (2)

Haq Nawaz
Haq Nawaz

Reputation: 482

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%;
        }

Upvotes: 0

Snuwerd
Snuwerd

Reputation: 459

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

Upvotes: 1

Related Questions