Re: Reserving aspect ratio for images

I joined this list because of the same question!:
http://lists.w3.org/Archives/Public/www-style/2016Mar/0210.html
My proposal was to use new units %w and %h - which would be the width and
height percentages of the offsetParent. So you could use width:100%w and
height:56.25%w to get a 16:9 ratio.
There was a problem with my solution, which I did not understand (but is no
doubt correct):
http://lists.w3.org/Archives/Public/www-style/2016Mar/0215.html

With a preserve-ratio solution I think you get into problems when a fixed
width and height have also been provided:
```
.element {
  preserve-ratio: 4 3;
  width: 1000px;
  height:1000px;
}
```

SVG uses a number of values to handle this:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Are there proposals to handle aspect ratio in flexbox and grid layout?

Josh On







On Mon, Jun 13, 2016 at 6:05 PM Una Kravets <una.kravets@gmail.com> wrote:

>
> On Jun 12, 2016, at 12:42 PM, Oliver Joseph Ash <oliverjash@gmail.com>
> wrote:
>
> One idea I had was to add an aspectratio attribute to the img element
> (e.g. aspectratio="4:3"). Perhaps the source element could also receive an
> aspectratio attribute, so browsers know how to lay out the img element.
>
>
> I agree —and I’ve seen this padding-bottom hack several times, especially
> for videos. I think this might be useful for other elements (not just video
> and img), too. Aspect ratio could be a CSS property with spaced values to
> remain in consistency with box-shadow and shorthand properties.
>
> I.e. `preserve-ratio: <width-ratio> <height-ratio>`
>
> ```
> .element {
>   preserve-ratio: 4 3;
> }
> ```
>
> - Una
>