Re: Reserving aspect ratio for images

There's a current proposal (GitHub issue here:
https://github.com/w3c/fxtf-drafts/issues/7) to extend the SVG viewBox to
CSS box model.  It would handle most cases where aspect-ratio control is
required.

The only thing it wouldn't handle is aspect-ratio control without scaling
to fit.  The only practical case I could think of that isn't covered is if
you were using CSS shapes, and wanted the box to maintain the aspect ratio
of the shape, but to have text stay the same font-size flowing within that
shape instead of scaling to fit.

~ABR



On 14 June 2016 at 16:08, josh on <josh@theyrule.net> wrote:

> 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
>>
>