fluid boxes with fixed aspect ratio

In some cases e.g. for displaying a responsive video we need a solution for flexible elements which keep their aspect ratio when resized. You can do this with javascript but then you are doing something wrong.

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”

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

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!

about:consistency – lessons learned: the hard way

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.

Designing for RTL platforms – A flipped layout

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