# Constant Container Aspect Ratio

**URL:** <https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 19, 2025, 12:51pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573 "2025-06-19T12:51:22Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [June 19, 2025, 2:15pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/6 "2025-06-19T14:15:56Z")

</div>

So I just learned that my example above is doing it the hard way, when I learned about the unique length units available to container queries ([CSS container queries - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)). I updated that project I made for you yesterday to demonstrate:

[TEST\_2025-06-19\_0914.zip](https://forum.inductiveautomation.com/uploads/short-url/5oVj8vwp22Kv21pdnLWvDsZYVZD.zip) (46.5 KB)

The CSS is much simpler:

```python
.psc-LabelContainer {
	container-type: size;
  	container-name: card;
  	font-family: Arial;
}
@container card (width >= 0px) and (height >= 0px) {
	.psc-Label { font-size: min(15cqw, 22cqh); }  
}

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573)._