Menu
All the examples I could find of flexible box model show stuff expanding either in the horizontal direction or the vertical direction. I could not find out how to let things flexibly expand while maintaining a fixed aspect ratio.
612
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
flex-basis defines the default size of an element before the remaining space is distributed. So in this case, you have defined all a children` to 50%.
I asked a similar question recently in a W3C course forum, and got an in-depth reply from one of the instructors, Phil Archer. He suggests using SVG to maintain aspect ratio while scaling, and also shows by example that it works well in web browsers, but not so well on mobiles. See http://philarcher.org/diary/2012/scalablesquares for more info.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
