W3C home > Mailing lists > Public > www-style@w3.org > June 2016

Re: Reserving aspect ratio for images

From: josh on <josh@theyrule.net>
Date: Tue, 14 Jun 2016 22:08:49 +0000
Message-ID: <CAHhdfkU+KoOK2w2KbiUHhwyJ_uEXy_=qdAVF1qgct6wFDPrY3Q@mail.gmail.com>
To: Una Kravets <una.kravets@gmail.com>, Oliver Joseph Ash <oliverjash@gmail.com>
Cc: www-style@w3.org
I joined this list because of the same question!:
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):

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;

SVG uses a number of values to handle this:

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
Received on Tuesday, 14 June 2016 22:09:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:03 UTC