Why isn't the HTML/CSS width and height adjusting?

<!DOCTYPE html>
<html>

<head>
  <title>Demonstration of HTML, CSS, and JavaScript</title>

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

</head>


<body>
  <!-- Begin 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%;
}

This is how my page looks:

https://i.sstatic.net/RtJHw.png

I would like the width to span the entire first row and the height to be 10% of the page. See example below:

https://i.sstatic.net/tA4Pn.png

The image should end where the black line ends.

I've tried adjusting the width and height multiple times without success. Whenever I change the width, the height also seems to change unexpectedly. Can someone please help me figure out what I'm doing wrong?

htmlcss

Answer №1

When using percentage heights in CSS, it's important to note that they refer to the height of the immediate parent element. If the parent's height is not explicitly set, the CSS will have no effect. One way to work around this is by cascading a 100% height setting down from the body tag or applying a fixed value to the image tag's immediate parent.

Fixed Value (Utilizing view height to directly reference the 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 scenarios, it's crucial to constrain the image height within the parent element for any changes to take effect.

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

Answer №2

Make sure to specify the height and width for each element in your CSS, as it helps determine how elements are displayed.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing an image created on an HTML5 canvas directly to your phone's storage

Working with Phonegap (javascript), my goal is to resize an image selected by the user from their gallery and save it to a different folder structure. I've tried various methods but none seem to be working for me. I have looked at similar questions o ...

javascriptandroidhtmlcordovahtml5-canvas

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

Populate the line path of amCharts and eliminate the y-axis labels

I'm experimenting with amCharts to generate the following: https://i.sstatic.net/LWAQr.png Currently, I'm facing some challenges: The y-axis labels are not disappearing. I attempted to use theYAxis.disabled = true; as mentioned in the documen ...

javascriptjquerycssamchartsamcharts4

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

htmlcssbootstrap-4

How to effectively position a div in CSS into two columns

I am currently facing an issue with positioning a div when one post contains a lot of text. The div seems to be expanding to accommodate the extra text, causing layout problems. You can view my code here. HTML <div class="container"> <div> ...

htmlcss

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

I am working on making this logo align perfectly with all screen resolutions and browsers, while ensuring it stays at the exact center (both vertically and horizontally) of the #container. If the resolution drops below 320px, I want the company name to dis ...

htmlcssresponsive-design

Displaying the :before attribute while concealing the element solely with CSS

I have encountered a situation where I am unable to edit the HTML of a document, specifically a payment page on Shopify, for security reasons. Unfortunately, editing JavaScript is also restricted in this scenario. However, there is a workaround available ...

htmlcssinternet-explorer-8internet-explorer-9

AngularJS - Implementing toggle functionality for checkbox on button click

Here's my situation: I have a group of checkboxes that are initially disabled. When button 1 is clicked, I want the checkboxes to become enabled and buttons 2 & 3 to appear while hiding button 1. If buttons 2 or 3 are clicked, I want to disable the c ...

javascripthtmlangularjscheckbox

CSS unexpectedly transitions away

Check out this link for additional details As the cursor moves away from the element, it swiftly reverts back to its original form (I've demonstrated this in the video) .productinfo { display: flex; flex-direction: column; align-items: c ...

htmlcsstransition

How to vertically align content within a custom div container using Bootstrap 4

I have been searching for answers to my specific case, but I haven't found any that suit my needs. My goal is to create a translucent background within a Bootstrap container to enhance the readability of text. The result I was able to achieve so far ...

htmlcssbootstrap-4

Try utilizing the 'id name ends with' parameter within the on() function for creating dynamic bindings

I need help with dynamically binding the change event to multiple select input fields that are generated within my form. The item field is generated with IDs like: id="id_form-0-item" id="id_form-1-item" id="id_form-2-item" ... Although I have attempte ...

javascriptjqueryhtml

Google Maps problem: cross-origin framing is not allowed

I've encountered an issue with the custom Google Maps embedded using iframe. The error message I'm getting is: does not permit cross-origin framing. Instead of displaying a blank iframe, I would like to change it to show a "map cannot be disp ...

javascriptjqueryhtmlgoogle-mapsiframe

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

javascriptphphtmlcssajax

PHPUnit ensuring consistent HTML structure regardless of spacing differences

I have a script that generates HTML through the command line and I want to write unit tests for it using PHPUnit. It's important to note that this HTML is not intended for display in a browser, so Selenium isn't the right tool for testing it. My ...

phphtmlunit-testingphpunit

Issue with Laravel css not being correctly processed by the elixir function in xampp environment

After creating a versioned css file with the following code: elixir(function(mix) { mix.sass('demo.scss') .version('css/demo.css'); }); The file can be found at public/build/demo-34f5737738.css. According to the documentation, ...

phpcsslaravellaravel-5xampp

Update Button Colour upon clicking the Button

I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...

javascriptjqueryhtmlcss

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

htmlcssoverlay

Using the same ID tags for dynamically generated videos in a v-for loop can lead to

I am currently in the process of uploading a video file and using v-for to generate video tags with the corresponding video URL. Each tag has an ID of "myVideo." I am aware that having duplicate IDs on a page is not allowed, so how can I ensure that the co ...

htmlvue.jsvideo

Substitute the division

Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: https://i.sstatic. ...

javascripthtmljquerycss

How can I apply a shadow effect to a <View> element just like a regular tab bar?

My customized navigation bar is using the <View> element. https://i.sstatic.net/QA8Ad.png Is it possible to add a bottom shadow similar to the default react-navigation bar (refer to the image below)? https://i.sstatic.net/ORD8J.png I find it chal ...

cssreactjsreact-nativereact-navigation