Max-Width & Height when scaling

Responsive
1

Hello folks,

It's probably a simple setting, but I just can't find the solution.

First, my demo:
Working Demo

Here's the Hype file:
Download Hype File as zip

I have an symbol with the dimensions 1280x720px. This symbol is horizontally and vertically centred. It should be scaled if the width of the window is smaller than 1280px or the height of the window is smaller than 720px. It should therefore only be scaled smaller if there is not enough space. It should not be scaled larger than the original size of 1280x720px.

I tried to fix it via CSS with max-width and max-height, but it doesn't work.

Can someone please help me how to achieve this?

Thanks for your help!

2

max-width.hype.zip (181.2 KB)
no css needed

2 Likes
3

As the layout engine uses transforms, the actual width isn't changed. Hence, the min-width rule you are using isn't changing anything. You could just do your own scaling using JavaScript or use something like a media query if you can rely on having the full screen.

		
		@media screen and (min-width: 1280px) {
			#wrapper {
				transform: scale(1) !important;
			}
		}
4

but won't Hype also control the translateX? ... this might then not match with align center

i often discover that grouping and then mixing further responsive settings within Hype can do a lot ...

1 Like
5

That is correct… just a hack for this specific case. Another approach would be an decorator that filters transform and sets the scale if > 1. Although, i hate manipulating transforms as there is no good interface other than string replacement or deep math. At least I am currently aware of.

The rout @h_classen has suggested

That would be neat. Is it possible to use the Hype system and “fake” a max width?

6

at least in the example above :wink:

not by setting an explicit max-width-value, but as the parentgroup does not resize its height the width of the symbol won't be larger than the orig layoutwidth

1 Like
7

Oh, now I see your file above. Sorry about that… I completely missed that, we must have replied in close proximity. Indeed, genius … @h_classen! Learned another thing!

1 Like