Constant Container Aspect Ratio

Ignition
1

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?

2

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

1 Like
3

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
image500×199 6.33 KB

4

Ah, no. There are other recent discussions of this issue on the forum.

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

1 Like
5

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

.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.

6

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). I updated that project I made for you yesterday to demonstrate:

TEST_2025-06-19_0914.zip (46.5 KB)

The CSS is much simpler:

.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); }  
}
2 Likes
7

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

1 Like