Displaying flexible images is not a problem as we might know but keeping the aspect ratio on block elements like div isn’t that easy because their height is depending on their content (height: auto) or fixed values.
When we take a deeper look into the CSS specification we see that the padding-top when given in percentage on a block is calculated out of the width of the containing element.
“Percentages: refer to the width of the containing block”
With this knowledge we are now able to produce a flexible container that keeps its aspect ratio while resizing. Lets first make a responsive video:
See the Pen responsive video – keep aspect ratio by Christoph Reinartz (@creinartz) on CodePen.0
The trick is we set the padding-top of the outer element top to 56,25% (9/16 = 56,25%) and set the parent element to position absolute and fluid 100% width and height. For a 4:3 video we would use 75% (3/4 = 75%) to have another aspect ratio.
Doing this let us solve a problem with may arise during developing a responsive website. A flexible box which should keep its aspect ratio, e.g. a box which always has the same height as its width.
Lets do this 100% x 100% box and 200% x 100%.
See the Pen Flexible box same height as width by Christoph Reinartz (@creinartz) on CodePen.0
i like this!
i had the big pleasure to give a lightning talk at the leanUX meetup organized by the guys from sipgate at Düsseldorf.
the most exciting point for me was that one of my favorite speakers, a man called brad frost, also talked at this meetup.
so to let him understand what i am talking about i did this talk in english, which was quite challenging and needed some more practice than doing a talk in my native language.
i was very glad that i received a lot of cool feedback after the talk.
I had the pleasure to write an article for my company’s techblog about our approach of implementing the view / presentation layer for the flipped right-to-left platforms such as www.trivago.co.il or www.trivago.ae
We basically decided to flip the css declaration within preprocessing instead of using a post-processing approach
You can read the complete article on the trivago techblog
My slides from my talk about CSS3 grid and flexbox at the pottJS Meetup on 19.03.2015.
This talk was about introducing new CSS3 layout modules and the advantages of those compared to old-school-layouting.
i am currently preparing a presentation about css flexbox which i will present on a code-workshop at my company trivago.
the final version can be found here:
thinking about extending this presentation…