- From: josh on <josh@theyrule.net>
- Date: Fri, 05 Feb 2016 16:23:35 +0000
- To: www-style@w3.org
- Message-ID: <CAHhdfkWcWDJhU2crX3gFBUWZwtuPojCfk7DL=mdU8cZX=auDqg@mail.gmail.com>
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. Josh On
Received on Thursday, 11 February 2016 14:44:43 UTC