Re: [css3-box] providing an aspect-ratio for a box (Re: suggestion: fixed-aspect-ratio CSS rule for block elements)

Hi.

Is this open for discusion still? Or did this got put on ice here (Wed, 22
Sep 2010 17:03:39).
Anyhow, I got some thoughts, as a front end developer, on how I would find
this property useful (and I would very much find it useful!).

I would like to put forth a slightly different proposal than what has been
in the conversation history as I've seen. Here's what I think make sense:

*values: *auto | inherit | maintain | [<rel-width> <rel-height>]
*Initial value:* auto
*Applies to: *block elements and inline-block elements
*Inherited: *yes

block.element {
  aspect-ratio: 16 9;
}

"aspect-ratio" can take a keyword or two numbers as argument. The valid
keywords would be "maintain", "inherit" and "auto".

* "auto" will of course be the initial value of all block elements, and is
the same as no aspect-ratio value

* "inherit" will inherit the aspect-ratio of the closest parent where
aspect-ratio is not "auto", or, if all parents are "auto", the element will
be "auto" as well

* "maintain" will keep the aspect-ratio the element gets on page load

* [<rel-width> <rel-height>] specifies an aspect-ratio in relative numbers,
I.E. "aspect-ratio: 4 3;" with a width specified to 400px would result in a
height of the element equal to 300px.

1. If one of css properties "width" or "height" is set (not "auto"), that
value would be used to calculate the other.
If an element with the "aspect-ratio" property set, has a "width" value of
"auto" and a "height" value set in percent (or other relative unit), the
height should be calculated from the closest parents height. So if closest
parent is 50px high, and our element has "aspect-ratio: 2 1;" and a
"height: 100%;", our element dimensions would turn out to be 100px wide and
50px high.

2. If neither css property "width" nor "height" is set on the element (both
is "auto"), the aspect-ratio would work the same way as "background-size:
contain", I.E. aspect-ratio is maintained, and whatever relative value of
the "aspect-ratio"-property that first would be equal to 100% of the parent
element corresponding property, would be used as the base for calculating
the other. Above mentioned value calculation regarding height values in
percent (or other relative units) comes into play here as well.

3. If both css properties "width" and "height" are set on the element,
aspect-ratio has no effect.


Examples:
*dom-structure:*
html
  head
  body
    .parent
      .child


*css scenario 1, relative values, landscape aspect-ratio:*

.parent {
  width: 500px;
  height: 200px;
}
.child {
  height: 100%;
  aspect-ratio: 16 9;
}

the "width" of `.child` would be 356px (or rather height(177,7777778%) as
per previous conversation) and the "height" would be 200px (100%)*
*
*
*
*
*
*css scenario 2, no width nor height value, portrait** aspect-ratio**:*
.parent {
  width: 500px;
  height: 500px;
}
.child {
  aspect-ratio: 3 4;
}

the "width" of `.child` would be 75% (375px) and the "height" would be 100%
(500px)


I argue the relative values (<rel-width> and <rel-height>) vs a float
(previous suggestion: "aspect-ratio: 0.3;") here because they map to those
used in other areas, especially for screen display size (tv's are commonly
16:9 or 4:3), so I think it makes sense to use this type of convention when
specifying the ratio values.

/jan