fix: Contain now preserves aspect ratio of tall images (height > width)

[saltkid]

closes #3708, closes #4407

---

Problem

Setting both width and height to "Contain" correctly scales wide and square images, and are not affected by this PR's change. However, for tall images, Contain distorts the aspect ratio due to the current target_width formula inversely scaling the width.

Solution

Replace the current target_width formula with one that properly scales the width proportionally to the height, keeping the aspect ratio.

current

$$\text{target\_width} = \frac{\text{pixel\_height}}{\frac{\text{tex\_width}}{\text{tex\_height}}}$$

updated

$$\text{target\_width} = \text{pixel\_height} \times \frac{\text{tex\_width}}{\text{tex\_height}}$$

where:

• target_width: scaled width of image
• tex_width, tex_height: original image dimensions
• pixel_height: window height (also be used as the scaled height of the image)

This was derived from basic direct proportionality, since we want to scale while preserving aspect ratio:

$$\frac{\text{scaled\_width}}{\text{scaled\_height} } = \frac{\text{width}}{\text{height}}$$ $$\text{scaled\_width} = \text{scaled\_height} \times \frac{\text{width}}{\text{height}}$$

Examples

The art is by @sue_kun. This image is chosen because its height is greater than its width. The config used is:

local wezterm = require("wezterm")
local config = wezterm.config_builder()
config.background = {
	{
		source = {
			Color = "#161616",
		},
		height = "100%",
		width = "100%",
	},
	{
		source = {
			File = os.getenv("HOME") .. "/pictures/wt_bg/right-uniform-0.1/jk.png",
		},
		width = "Contain",
		height = --[[ VARIABLE ]],
		vertical_align = "Middle",
		horizontal_align = "Center",
		repeat_x = "NoRepeat",
		repeat_y = "NoRepeat",
		opacity = 0.2,
	},
}
return config

Most notable change in scaling behavior is when both width and height are set to "Contain", where it maintains the aspect ratio now, like css's object-fit: contain. Other combinations only change behavior when width is set to "Contain". In these scenarios, the width is scaled as though the height were also set to "Contain", even if it is not. As you will see in the examples below, all widths are the same and only the height differs.

h: Contain

old	new

h: Cover

old	new

h: 250px

old	new

h: 250pt

old	new

h: 50%

old	new

h: 30cell

old	new

[saltkid]

sorry, I'll redo the pr. didn't mean to explode...