especially because of safari (soon deprecated)
CSS now has the property: aspect ratio". Instead of waiting for safari we have Element.
- No
overflow:hidden
- No
position:relative
orposition:absolute
min-height
andmax-height
wins over the aspect-ratio (behavoir not possible with native CSSaspect-ratio
!?)- Use the class '-body' to fill the available height
- CSS only fallback
- If the content is heighter than calculated by aspect-ratio, the content-height wins
- Performant and responsive, because the aspect ratio is generated with css
<u1-aspect-ratio>
<div class=-body>
Hello world
</div>
</u1-aspect-ratio>
u1-aspect-ratio {
--u1-ratio:.5;
min-height:100px;
max-height:260px;
background:var(--color-light);
}
u1-aspect-ratio > .-body {
padding:1rem;
display:flex;
align-items:center;
justify-content: center;
}
<link href="https://cdn.jsdelivr.net/gh/u1ui/aspect-ratio.el@x.x.x/aspect-ratio.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/aspect-ratio.el@x.x.x/aspect-ratio.min.js" type=module>
- To make the element work with border and padding, the element has a forced
box-sizing:content-box
- MIT License, Copyright (c) 2022 (like all repositories in this organization)
- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥