1

I have already read Maintain the aspect ratio of a div with CSS (not a duplicate, please read further) and the other ways to do it, but here I'm asking something more specific:

Is there a way to use the width of the current element (self) in a CSS calc rule?

Or if not, is it possible to use the width of the parent element in a height: calc(...)?

Something like:

#container { 
    display: flex; 
    width: 500px; 
    flex-direction: row; 
}
#a { 
    background-color: red; 
    width: 50%;
}
#b { 
    background-color: blue; 
    width: 50%;
    height: calc(100% of self current width); /* <------- pseudo code here - does this exist? */
}
<div id="container">
<div id="a">
Hello
</div>
<div id="b">
World
</div>
</div>
Basj
  • 41,386
  • 99
  • 383
  • 673
  • You may find something here to help you on your way https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout – Tristanisginger Feb 04 '22 at 11:11
  • read the second answer of the duplicate – Temani Afif Feb 04 '22 at 11:21
  • @TemaniAfif it does not answer this question here, did you read my first paragraph? Here it's a specific question about `calc`. – Basj Feb 04 '22 at 11:32
  • you cannot do it with calc() hence the proposed solutions – Temani Afif Feb 04 '22 at 11:42
  • @TemaniAfif Then, it's not a duplicate (since my question is really about doing it with `calc`), the answer is that it's "No, it's not possible". Please reopen, the question has specifically this requirement and mentioned the link question (which is not a duplicate). – Basj Feb 04 '22 at 11:45
  • There is no need to answer *no it's not possible* and have a link to another question. This is the purpose of the duplicate. It's not possible in many ways. We should not have a question for each "impossible way" or a "specific requirement". The purpose is to express width based on height (or the opposite) and this is covered by the duplicate. – Temani Afif Feb 04 '22 at 11:49
  • @TemaniAfif An answer like "It's not possible with pure CSS calc rules" has a value in itself: it will prevent other interested people from searching if there is an alternate way with calc, after reading all the answers of https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css. In general, a negative answer to a question *is helpful* in certain cases, and has knowledge value (because it prevents to spend hours searching for a specific solution using this precise tool if it cannot do it). – Basj Feb 04 '22 at 11:51
  • @TemaniAfif For a question `Can I do X with specific tool Y?`, I think `This is a duplicate of "You can do it with Z"` is not valid. The proper answer is `You cannot do it with specific tool Y only (+ref1 from authoritarive doc). You need other tools, such as Z, see ref2.` I'm sure we can agree on this :) – Basj Feb 04 '22 at 11:54
  • redirecting people to **the** alternative solutions that works has more values for the community than a very specific requirement. The duplicate will be more helpful that saying "no you cannot do it" plus I said it in the comment so the "NO" is here if anyone is looking for it – Temani Afif Feb 04 '22 at 11:54
  • @TemaniAfif I mentioned in the first line of my question that I *already* read these solutions, and that I'm looking for a precise solution with *another specific tool*. This question is interesting in itself, because it allows to know the boundaries of what `calc` car or cannot do: knowing what `calc` can and cannot do is interesting to learn, can we agree on this? Thus the upvote by someone, by the way. – Basj Feb 04 '22 at 11:56

1 Answers1

0

You can use padding-top: 100%; to make width:height = 1:1.

Reference: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Henryc17
  • 851
  • 4
  • 16