# 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:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bshriner](https://avatars.discourse-cdn.com/v4/letter/b/46a35a/32.png) [@bshriner](https://forum.inductiveautomation.com/u/bshriner)\
**Post date:** [June 19, 2025, 12:51pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/1 "2025-06-19T12:51:23Z")

</div>

I want to be able to make a dashboard in a coordinate container then keep that aspect ratio the same no matter how big the window is that it is being viewed in. Is this possible?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 19, 2025, 1:13pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/2 "2025-06-19T13:13:04Z")

</div>

`props.aspectRatio` on the container, hmm? (Only applicable in percent mode.)

---

<div class="post-metadata">

**Author:** ![bshriner](https://avatars.discourse-cdn.com/v4/letter/b/46a35a/32.png) [@bshriner](https://forum.inductiveautomation.com/u/bshriner)\
**Post date:** [June 19, 2025, 1:19pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/3 "2025-06-19T13:19:05Z")

</div>

That close to what I'm looking for. My issue is that the label text doesn't follow this aspect ratio and will overlap outside of the box. Do you know if there is a way to have the text follow this same ratio?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eafb6bfa7dac798e7e487e3b229c817d9507ec0.png)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 19, 2025, 1:24pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/4 "2025-06-19T13:24:16Z")

</div>

Ah, no. There are other [recent discussions](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/10) of this issue on the forum.

If it were me, I'd deploy with BIJC's Pan/Zoom 3rd party module.

---

<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, 1:50pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/5 "2025-06-19T13:50:25Z")

</div>

I use CSS Container Queries to adjust the font size based on the size of the container that the text is in:

```python
.psc-Cards\/QueryContainer {
	container-type: size;
  	container-name: card;
  	font-family: Arial;
}
@container card (width >= 380px) and (height >= 380px) {
	.psc-Cards\/LargestText { font-size: 52px !important; }  
	.psc-Cards\/LargeText { font-size: 42px !important; }  
	.psc-Cards\/MediumText { font-size: 24px !important; } 
	.psc-Cards\/SmallText { font-size: 18px !important; } 
	.psc-Cards\/SmallestText { font-size: 13px !important; }  
}
@container card (width < 380px) or (height < 380px) {
	.psc-Cards\/LargestText { font-size: 48px !important; }
	.psc-Cards\/LargeText { font-size: 40px !important; }
	.psc-Cards\/MediumText { font-size: 23px !important; }
	.psc-Cards\/SmallText { font-size: 17px !important; }
	.psc-Cards\/SmallestText { font-size: 12px !important; }  
}

```

It's a pain, because you have to account for all the potential sizes of the container, and figure out the corresponding font size, but it works.

---

<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); }  
}

```

---

<div class="post-metadata">

**Author:** ![bshriner](https://avatars.discourse-cdn.com/v4/letter/b/46a35a/32.png) [@bshriner](https://forum.inductiveautomation.com/u/bshriner)\
**Post date:** [June 19, 2025, 2:51pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/7 "2025-06-19T14:51:46Z")

</div>

I think this is exactly what I was looking for. Thank you so much!

---

<div class="post-metadata">

**Author:** ![Bigtalljv](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@Bigtalljv](https://forum.inductiveautomation.com/u/Bigtalljv)\
**Post date:** [July 23, 2025, 2:57pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/8 "2025-07-23T14:57:28Z")

</div>

where does this CSS go?

---

<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:** [July 23, 2025, 3:03pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/9 "2025-07-23T15:03:26Z")

</div>

In **stylesheet.css**. You'll need to "Enable Advanced Stylesheet":

> **[Style Classes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...

---

<div class="post-metadata">

**Author:** ![Bigtalljv](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@Bigtalljv](https://forum.inductiveautomation.com/u/Bigtalljv)\
**Post date:** [July 23, 2025, 3:06pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/10 "2025-07-23T15:06:50Z")

</div>

Thank you

---

<div class="post-metadata">

**Author:** ![Bigtalljv](https://avatars.discourse-cdn.com/v4/letter/b/e19adc/32.png) [@Bigtalljv](https://forum.inductiveautomation.com/u/Bigtalljv)\
**Post date:** [July 23, 2025, 10:59pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/11 "2025-07-23T22:59:56Z")

</div>

does this work with embedded views? I have objects that are several layers deep. Main overview page with an embedded view of a view that has a coordinate container with another embedded view of a view with a coordinate container that has two labels in it. I'm not sure where the styles would need to be applied or if it can even work.

---

<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:** [July 24, 2025, 1:41pm UTC](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/12 "2025-07-24T13:41:04Z")

</div>

I'm sure it would. It's just a matter of applying the styles to the container (`LabelContainer` in my example) and the label that is somewhere inside that container (`Label`). You create and assign those styles in the normal way, then define them in **stylesheet.css** by adding the prefix `.psc-`