Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario).

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

I was able to achieve the #2 scenario successfully. But when attempting the #1 scenario, the container's height expands unexpectedly. Here is the code I used:

HTML, body {
margin:0;
    padding:0;
height:100%;
}
    
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}

#container:hover {
width: 500px; /* Only increasing the width */
  height: 300px;
}

#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}

#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}

#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}

#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}

#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}

.content {
display: inline-block;
margin: -2px;
}
<html>
  <body>
  if you hover over it, only the container's width will be increased, not the height
  <div id="container">
      <div id="c-ver-al">
        <div id="c-hor-al">
          <div id="frame">
            <div id="chat" class="content"></div>  
            <div id="window" class="content"></div>
          </div>
        </div>
      </div>
    </div>
    The height of the container should not change, but it is 
  </body>
</html>

Note: Padding has been added to the divs for easier visualization. Please excuse any imperfections in the demo as I am new to HTML and CSS.

Edit: Implemented a hover action in CSS for demonstration of aspect ratio functionality

Answer №1

The issue lies within the padding-bottom of your two inner elements. Due to the box model, when a percentage-based padding is applied to an element, it takes into account the parent's width, rather than the height.

To fix this, set a fixed padding-bottom:

HTML,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  background: khaki;
  padding: 10px;
  width: 350px; /* Adjusted for demonstration */
  height: 150px; /* Size within snippet */
  display: table;
}

#c-ver-al {
  background: lightblue;
  padding: 10px;
  text-align: -webkit-center;
  display: table-cell;
  vertical-align: middle;
  height 100%;
  width: 100%;
}

#c-hor-al {
  background: pink;
  padding: 10px;
  text-align: -webkit-center;
  display: inline-block;
  object-fit: cover;
  height 100%;
  width: 100%;
}

#frame {
  padding: 10px;
  background: lightgray;
  height: 100%;
  width: 100%;
}

#window {
  width: 66%;
  padding-bottom: 75px;
  background: blue;
}

#chat {
  width: 33%;
  padding-bottom: 75px;
  background: red;
}

.content {
  display: inline-block;
  margin: -2px;
}
<html>

<body>
  <div id="container">
    <div id="c-ver-al">
      <div id="c-hor-al">
        <div id="frame">
          <div id="chat" class="content"></div>
          <div id="window" class="content"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

If you wish for the child to go beyond the parent container, consider using negative margins.

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

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

Clarity of visual in a lattice

I'm encountering a small issue with my ExtJS 4.2 MVC application that involves grid and image transparency. Below is a snippet of my grid setup: Ext.define('XProject.view.message.inbox.Grid', { extend: 'Ext.grid.Panel', al ...

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

Make individual term span the entire width of 100%

Is it feasible to expand a single word like "News" to occupy 100% width of the div element? My goal is to automatically adjust letter spacing and justify individual words. Currently, I have a menu with items such as: Home About News Etc It would be idea ...

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

Utilize JavaScript conditions to dynamically apply styles within your web application

I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...

Attempting to toggle the menu with jQuery does not yield any results

I am fairly new to the world of javascript and jQuery and I'm encountering some issues that are proving difficult to troubleshoot. I am experimenting with the .toggle function on a menu list, but when I click the temporary button I've set up for ...

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

After creating a WordPress plugin, I am considering revamping its layout with the help of bootstrap CSS and js. However, I have encountered issues in the past due to conflicting CSS naming conventions. I want to ensure that there are no namespace conflicts ...

Tips for designing an Ionic app with a Pinterest-inspired layout

Recently stepping into the world of Ionic development, I find myself facing a challenge in creating a Pinterest-inspired layout using Ionic. Specifically, I am struggling to achieve a two-wide list of items with varying heights. Can anyone offer guidance ...

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

Is there a way to have a banner in a div and display it on the home page so that it automatically appears on all other pages without needing to place the code on each page individually? Any assistance would be greatly appreciated :) ...

Avoiding the repetition of CSS animations during Gatsby page hydration

I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening? Below is my styled components code ...

Tips for creating content with ellipsis after every 5 characters

I am new to coding and I need some assistance. I want to truncate text in my navigation bar if it exceeds 5 characters by displaying the first 5 characters followed by an ellipsis. This is to prevent display issues in my nav menu. For example: Input: T ...

My mobile is the only device experiencing responsiveness issues

One challenge I'm facing is with the responsiveness of my React application, specifically on my Galaxy J7 Pro phone which has a resolution of 510 pixels wide. Interestingly, the app works perfectly on a browser at this width, as well as on my tablet ...

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque ...

I am looking to place two HTML buttons next to each other on the same line

I am trying to display two HTML buttons next to each other on the same line, with the "Submit Request(s)" button appearing first. The issue I am facing is that the top of the second button aligns with the bottom of the first one. The second button is cor ...

What steps do I need to follow to change the background color to white for the <App/> component in solid-js?

In my solid-js application styled with tailwindcss, I established a gray color in the index.css for the background of various screens. However, I wanted the main <App/> component to have a white background instead. To achieve this, I created an App.c ...

Animating with CSS3 triggered by JavaScript

Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degr ...