Is there a way in CSS/3 to dynamically adjust the height based on the width?

Is there a way in CSS/3 to maintain the shape ratio of a div while keeping it responsive?

Let's say the container is 100px wide.

For example:
width: 100%;
height: 100%-of-width;
Result: The div is 100px wide and 100px high.

Another example:
width: 80%
height: 60%-of-width;
Result: The div is 80px wide and 48px high.

Is there a solution for this in CSS?
Despite options like auto, vw, and various hacks available, there doesn't seem to be a straightforward solution yet. Is anyone aware of one? It's frustrating that in 2016 we still have to resort to padding hacks or potentially using JavaScript to solve this issue.

EDIT:

  • Padding-bottom can be cumbersome as it requires absolute positioning of inner elements.
  • Vw units are based on screen size, which may not be suitable for all cases.
javascripthtmlcssaspect

Answer №1

Utilizing the calc function allows you to apply the same base value within it.

div {
  background-color: red;
  width: 100vw;
  height: calc(100vw * 0.5);
}
<div></div>

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

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

javascriptjqueryhtmlcssajax

Can you explain the meaning of this PHP syntax and why is this variable showing NaN?

Looking for question marks on Google can be quite challenging. Can someone explain this process step by step? $page = isset($_POST['page'])?$_POST['page']:"0"; I believe it means to check if $_POST['page'] is set, use that ...

phpjavascriptjquery

Tips on making a progress bar with a reverse text color for the "completed" section

I've been tackling this issue for hours, but haven't found a working solution yet. The challenge is to create a progress bar with a dynamic width and a centered label that changes its text color between the progressed and unprogressed parts. Here ...

htmlcss

The height on iPad Chrome is displaying incorrectly

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177 I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing ...

htmlcssiosgoogle-chromeipad

Looking to compare values within an ng-repeat loop?

I am trying to compare values within the context of an ng-repeat directive. Specifically, I need to compare the current value with the previous value in the array being iterated over by ng-repeat. For example, if my array contains the values [2,3], how can ...

javascriptangularjs

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution: <SCRIPT LANGUAGE="Javascript"> function banner() { } ; b = new banner() ; n = 0 b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'> ...

jqueryhtmlcssimage

Exploring the power of searching JSON data using ReactJS

After reading through the "Thinking in React" blog, I'm inspired to create something similar. Instead of filtering an array table, I want it to display the row that matches the input value. I have attempted this and created a jsfiddle example here: j ...

javascriptjqueryjsonreactjs

Top method for customizing w2ui grid appearance

While utilizing the w2ui grid to showcase data in a table, I've found it to be quite effective. However, I'm not entirely happy with the appearance of the table itself. Are there any methods available for styling the table that don't involve ...

cssw2ui

Using jquery to update the overall quantity of likes

Utilizing jquery, html, and php, I have successfully implemented a like button on my page. However, I am currently facing an issue with displaying the total number of likes without refreshing the page. Upon clicking the like button, the jquery and php scr ...

phpjqueryhtml

What is the reason for the delay in the firing of this document.ready event

Similar Question: Understanding window.onload vs document.ready in jQuery I seem to be encountering a problem: I have an image on my webpage that is relatively small. I also have a JavaScript function that dynamically sets the height of the left sideb ...

javascripthtmlimagedocument-ready

Using jQuery.ajax and not retrieved using a GET request

I'm attempting to extract the value (adults) from a select option field using a GET request with AJAX. I am able to extract the value from the URL by displaying an alert with the URL in the jQuery function. However, I am unable to retrieve the value w ...

javascriptphpjqueryajax

The comparison between local variables and data can result in a significant drop in performance

My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it. export default { name: ...

javascriptvue.jsthiscesiumjsscoping

Get node extensions set up without the hassle of typing in commands

As part of my internship, I am tasked with setting up a node server for the company. I have successfully installed Node on my Windows computer and now need to install plugins such as:    - nodejs-webpack    - colors &n ...

javascriptnode.js

What are some ways to create a table that can be easily filled in?

I'm striving to enhance the user experience by allowing a table cell to be easily editable with just a double click, converting it into an input field with the existing cell value pre-populated. Currently, I have successfully achieved this functional ...

htmlangularjsuser-interfacehtml-table

Firing a custom jQuery event when a page loaded via AJAX is complete, ensuring it is triggered

I am facing an issue with a particular scenario. There is a page that contains a script to load a child page and log a custom event, which is triggered in a Subform. --Index.html-- <body> <input type="button" class="clickable" value="Load child ...

javascriptjquerytriggerscustom-event

Using jQuery's .grep() method on an array will only return the final digit

Could someone help me understand the behavior of jQuery's .grep() method? I'm creating a jQuery object array based on the names of these elements: <div class="small1 other">S1</div> <div class="small2">S2</div> <div c ...

javascriptjquery

What is preventing Web API from triggering a CORS error in browsers such as Chrome and Edge, as well as the Postman tool?

While working on developing an API in Asp.Net Core 3.1, everything seemed to be functioning properly. However, I encountered CORS-related errors when attempting to send requests via ajax. Interestingly, these errors were not present when sending GET reques ...

javascriptjqueryajaxcorspostman

Validate if the user is actively scrolling; if not, automatically adjust the scroll position to the bottom

I am currently developing a chat site where the chat box updates every 200 milliseconds. I have managed to reposition the scrollbar to the bottom when a new message is loaded. However, I encountered a problem - whenever a user tries to scroll to the top, t ...

javascriptjqueryscrollscrollbar

Tips for dynamically setting up an inputStream in a Java <audio> tag within an HTML5 environment

I need to incorporate a dynamic inputStream from a web service into an HTML5 audio tag so that users can play it. How can I programmatically set the content of the HTML5 tag to achieve this? ...

javahtmlinputstreamaudio-streaminghtml5-audio

JavaScript string: Use regex to find and replace with position index

I'm not very familiar with regex, so I'm curious about the process of replacing a section in a string based on a regex pattern where the index is part of the identified section. Let's consider this example string: let exampleStr = "How do ...

javascriptarraysregexstring