0

For example we have a div that we want to always keep in shape-ratio(aspect ratio), does CSS/3 have this kind of feature that I don't know about?

Container is 100px wide.

example:
width: 100%;
height: 100%-of-width;
result: div size is 100px wide and 100px high.

example 2:
width: 80%
height: 60%-of-width;
result: div size is 80px wide and 48px high.

Do we have anything like that?
Css already has auto, and vw and stuff like that, there is plenty of hacks but no decent solution yet, or I'm simply not aware of them, any one? We are in 2016 and still no way to overcome the absolute hack with padding. I could simply solve this with JS, but that's different story.

EDIT:

  • padding-bottom is not solution, it's work around that forces you to position inner elements in absolute.
  • vw is based on screen, it's not appropriate.
Mik
  • 124
  • 8
  • 1
    You can make use of media queries http://www.w3schools.com/cssref/css3_pr_mediaquery.asp – Shankar Shastri Aug 29 '16 at 09:20
  • https://spin.atomicobject.com/2015/07/14/css-responsive-square/ – Artem Gorlachev Aug 29 '16 at 09:22
  • Yes... You can do this by using [this](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Syed Furqan Aug 29 '16 at 09:23
  • I use `padding-bottom` all the time for this. See the dupe question. It's also useful for making squares. – 4castle Aug 29 '16 at 09:24
  • 1
    @4castle, none of those solutions are real solutions, they are workarounds that don't solve the main problem where you cannot set div in aspect and still freely work inside of it. Also vw is not acceptable answer, because I'm not looking to scale things based on screen. – Mik Aug 29 '16 at 09:25
  • 1
    @Mik Can you explain? The first answer is not a hack or workaround, it's a feature of `padding` that it is based on the element width when using `%`. It also allows you to work freely inside of it by using absolute positioning. – 4castle Aug 29 '16 at 09:27
  • @4castle, that's the problem, absolute position is not always welcome. And all of this solutions are still a hack even if it's padding, it's basically workaround that forces you to use absolute position on inner elements. – Mik Aug 29 '16 at 09:35
  • @Mik the solutions posted on the duplicate answer are the only ways you can preserve the aspect ratio of an element with *CSS*. – web-tiki Aug 29 '16 at 09:38
  • 1
    @Mik None of them are workarounds or hacks, because none of them are using bugs or trying to overcome bugs. – 4castle Aug 29 '16 at 09:38
  • @4castle, understandable, but again, formal question still stands, why we don't have a solution in 2016, that lets content creators be free of absolute positioning for divs with desired aspect ratio. – Mik Aug 29 '16 at 09:43
  • @Mik What's wrong with absolute positioning? It's only needed for a single inner div, in order to keep overflow from messing it up. If you want a fancy layout, you're probably using absolute positioning anyway. – 4castle Aug 29 '16 at 09:48
  • @4castle, I'm this kind of person, who doesn't like to accept workarounds and would like to know if we are working towards better solutions or we are looking for another decade of padding-absolute solution. It would change so many things towards responsive design. – Mik Aug 29 '16 at 10:22
  • @Mik We are working towards better solutions all the time, but this feature is pretty low-priority, since there's already several acceptable ways to accomplish it with CSS only. When it comes to improving CSS, the priority is usually to address the things that normally have to be done with JS. – 4castle Aug 29 '16 at 17:14
  • @Mik [This mixin](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/) makes it a bit more palatable, so you don't have write it over and over. – 4castle Aug 29 '16 at 17:22

1 Answers1

1

You can actually use calc and use the same base value on it.

div {
  background-color: red;
  width: 100vw;
  height: calc(100vw * 0.5);
}
<div></div>
oshell
  • 8,923
  • 1
  • 29
  • 47