Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows:

HTML

<div class="video">

  <div class="spot">
    <img src="..." alt="">
    <button>x</button>
  </div>

</div>

CSS

.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  position: absolute;
  max-height: 30px;
  top: 0;
  left: 0;
  display: table;
  margin: 0;
  max-width: 100%;
  /* width: 16%;  only height can affect image on content*/
}

.spot img {
  width: 100%;
  height: 100%;
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}

I want to ensure that the image adjusts its height according to the spot's height. Setting the width results in the image following the spot's width. Does anyone have a solution for this?

I have also created a jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.

htmlcsscss-position

Answer №1

Ensure that your image is in line with the height of your .spot element. Double-check the border on spot. Are you referring to overflow? Or do you want your .spot to match the height of your .video?

console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  border: red 2px solid;
  position: absolute;
  height: 40%;
  /*width: 20%;*/
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.spot img {
  /*width: 150%;*/
  height: 100%;  
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">

  <div class="spot">
    <img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
    <button>x</button>
  </div>

</div>

Answer №2

Always double check your CSS properties - in this case, you have mistakenly used max-width instead of width. Remember, max-width only limits the width, it does not set it to a specific value.

.element {
  position: relative;
  height: 50px;
  top: 0;
  left: 0;
  display: block;
  padding: 10px;
  width: 80%;
}

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

Dynamically created span element in script facing issues in MVC application

I have a single MVC project where, in the BusinessPosition.cshtml file, I am dynamically creating a tree view at runtime. By default, it displays the main child of the root node upon page load, like this: <ul class="col-lg-20 col-sm-12 col-xs-12" style ...

jqueryhtmlasp.net-mvcmodalpopup

Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...

javascriptjqueryhtmlcssslider

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Is there a way to retrieve the option value from a select tag using $r['usr_id'] when submitting it in order to utilize that value in a php query? Below is an example of my code : <pre> <div class="form-group"> & ...

phpjqueryhtml

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the ...

htmlcsstwitter-bootstrapbootstrap-5

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

Safari fails to set a div to 100% of its parent's height

Currently, I am developing a website where the layout of a section is structured as follows: <div class="col-md-6"> <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image& ...

htmlcsssafaribootstrap-4

Tips for incorporating material-ui icons into the column component of a data-grid component

I am currently working with the material-ui data-grid and I would like to display Edit icons from material-ui next to each row. Unfortunately, the data-grid does not provide any props specifically for this purpose. Below is the code snippet: import React ...

javascripthtmlreactjsdatagridmaterial-ui

Select a different radio button to overwrite the currently checked one

I am facing a situation where I have two radio buttons. The default checked state is one of them, but I want to change that and make the other one checked by default instead. Here is the HTML code: <div class="gui-radio"> <input type="radio" v ...

javascriptjqueryhtmlformsradio-button

The menu will expand to full width, with each list item evenly sharing the width to achieve full coverage

I am currently facing an issue with my horizontal menu on my website. I want the menu to stretch across the full width of the site, but I can't seem to get it right. Here is the code for my menu: <nav> <ul id="menu" class="menu"> &l ...

htmllistcssresponsive-design

How to target child <div> elements within a parent <div> using jQuery

I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids. My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave th ...

javascriptjqueryhtmlcss

Error: Trying to access 'MaterialModule' before it has been initialized results in an uncaught ReferenceError

I have been working on a form for a personal project and attempted to implement a phone number input using this example: . However, after trying to integrate it into my project, I encountered an error. Even after removing the phone number input code, the e ...

htmlangulartypescript

Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a le ...

javascriptjqueryhtmlcssjquery-selectors

Creating elegant Select Dropdown Box in AngularJS without relying on images

I am currently working on an angular page and have implemented a dropdown with ng-Options to fetch and set values successfully. However, I am now looking to enhance the appearance of this dropdown. After exploring options like ui-select, I realized that be ...

javascripthtmlcssangularjsui-select

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

javascriptjqueryhtmlselectionshow-hide

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

javascriptjqueryhtmlcssangularjs

I am having trouble with the CSS Hover and Active styling on my website

Below is the code for my navigation bar: <ul> <li><a href="index.html">HOME</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="resources.html">RESOURCES</a ...

htmlcss

Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes: https://i.sstatic.net/F0QZ6.png HTML: <div class="label label-as-badge"> {{ value.Termo }} <i class="fa fa-times"></i ...

htmlcssangularflexboxfont-awesome

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

htmlangular

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

javascriptjqueryhtmlcssangularjs