Aspect ratio proposal: new units %w and %h

I see that there is an ongoing discussion about maintaining aspect ratio
using Flexbox, I have long wanted a simple solution that might apply to all
block elements.  The vw and vh units are very useful for maintaining aspect
ratio because you can specify vw for height and vice versa, however they
don't respond to a change in size of the offsetParent just a change in size
of the viewport.

I wrote up this proposal - as best I could, to make a case for two new
units - %w, %h:

Problem: keeping an element’s aspect ratio as it scales in response to
parent element resizes.

Current solutions:

1) Using javascript to listen for page resize, then calculating size.

2) Using vh and vw - but only works if the parent element has the same
aspect ratio as the document - and is not scaled independently of the
document.

3) Using padding with a percent to hold an aspect ratio, this is
unnecessarily hacky, and even more hacky if you want it to respond to
changes in both width and height.
http://jonathannicol.com/blog/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/

Proposed solution:
%w, %h
Where 50%w is 50% of the offsetWidth of the offsetParent, and 50%h is 50%
of the offsetHeight of the offsetParent.

To maintain a div at 16:9 you could use the style:

.video-wrap {
  width: 100%w;
  height: 56.25%w;
  max-width: 177%h;
  max-height: 100%h;
}

I hope this is a helpful contribution, my apologies if it is not.

Received on Monday, 14 March 2016 22:21:57 UTC