Question

i’m try to determine the amount to scale down an image, which is in a container with other fixed height text fields, based on the resizing of a window to layout the container contents.

in this problem i’m only concerned about height, so when i mention scale, i’m refering to the height scale or scaleY.

in the diagram below:

1. Blue = Resizable main window.

2. Green = Resizable Container within main window.

3. Red = Fixed-height text fields (non-scalable).

4. Black = Scalable image.

   

the contents (text fields and image) fill the container, so the green container can represent the height of the text fields and image, or at least the difference between the first text field’s y coordinate and the last text field’s y coordinate and height.

resizing the window larger than the green container will have no affect on the green container and it will remain its current size. however, resizing the window smaller must change the container size to fit. i only have access to the image height. so resizing the window smaller will also scale the image height. the new scaled image height will determine the height of the container that includes the fixed height text fields.

Problem: after resizing the window to a lower height, how can i find out how much to scale the image (between 0.0 and 1.0) so that the fixed height text fields remain as distant from each other and the container is resized so its bounds remain equally distant (10px apart in this diagram) from the window.

image.scaleY = ...

Answer 1

Reducing window size by dh pixel must also reduce the image height by dh pixel in order to maintain all other absolute values.

Thus, the scaling factor is (given image_height is the current image height and dh is the number of pixels to reduce)

scale_y = (image_height - dh) / image_height