Uikit: [Feature Request] Aspect ratio component "uk-ratio"

[drmzio]

Introduction

• This new uk-ratio component can be applied to any element rather than just images, videos, or iframes.
• This can also replace the existing UIkit responsive height trick that is used (requires using the <canvas> element 😕).
• Responsive classes too! (e.g. uk-ratio-16-9@l , uk-ratio-4-3@m , uk-ratio-1-1@s)

Let me know what you think about this 🙂

Usage

<div class="uk-ratio uk-ratio-16-9">
    <div class="uk-position-cover">...</div>
</div>

_(The .uk-position-cover class is required)_

Demo

CodePen: https://codepen.io/drmzio/pen/rrKvZQ
_Tip: Try resizing your window_

More on CSS aspect ratio

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

---

Update 1

I've made a simple layout using the uk-ratio component.

CodePen: https://codepen.io/drmzio/full/yqRqvW/

These blocks are all divs and nothing special. You can easily replace any of them with an image, video, iframe, or anything you want!

---

Update 2

Maybe you want a photo gallery, but with different size images? No problem!
CodePen: https://codepen.io/drmzio/full/NBOLNZ/

[ambre-medien]

+1

[tim-basic]

Very cool

[DanielKulbe]

Like to have that, as the Best Practice Lighthouse test in my app fails because of wrong responsive image aspect ratio.