Ratio & Proportions

Ratios and proportions are fundamental concepts in mathematics. At its core, a ratio is a mathematical comparison of two quantities, representing how many times the first number contains the second. When two ratios are set equal, they form a proportion, which is governed by strict algebraic laws.

---

⚖️ Cross-Multiplication & Solving Proportions

The fundamental theorem of proportions states that for any direct proportion $\frac{A}{B} = \frac{C}{D}$, the product of the extremes ($A$ and $D$) equals the product of the means ($B$ and $C$):

$$A \times D = B \times C$$

This mathematical relationship allows us to solve for any single unknown variable when the other three are known. By applying algebraic divisions, we can derive the formulas to solve for each variable:

$$A = \frac{B \times C}{D}, \quad B = \frac{A \times D}{C}, \quad C = \frac{A \times D}{B}, \quad D = \frac{B \times C}{A}$$

This mathematical principle is the foundation of scale modeling, map reading, chemical stoichiometry, and financial conversions.

---

🧩 Greatest Common Divisor & Ratio Simplification

Just like fractions, ratios are easiest to understand when reduced to their simplest terms. Simplification is achieved by identifying the **Greatest Common Divisor (GCD)** of the two integers and dividing both terms by that value.

For a ratio of $15 : 35$, the GCD of $15$ and $35$ is $5$. Dividing both parameters by $5$ simplifies the ratio to $3 : 7$:

$$\frac{15}{5} : \frac{35}{5} \rightarrow 3 : 7$$

By simplifying ratios to their prime components, designers and engineers can scale physical assets while maintaining exact dimensional proportions.

---

📐 Dimensional Scaling, Aspect Ratios, and Screen Formats

In modern digital media, graphic design, and display engineering, ratios govern how visual content is rendered across physical screens. This is represented by the **Aspect Ratio**, which is the proportional relationship between the width and height of an image or screen.

Common aspect ratios include:

• 16:9 (Widescreen): The universal standard for high-definition television, monitor displays, and online video streaming (such as YouTube videos).
• 4:3 (Academy Format): The standard for classic television broadcasts, analog video signals, and iPad screens.
• 21:9 (Ultrawide): An ultra-panoramic format widely utilized in cinematic film production and high-end gaming monitors.

To compute the exact physical dimensions of a screen based on its advertised **diagonal size** ($D$) and aspect ratio ($x:y$), engineers utilize the Pythagorean Theorem. Since the diagonal forms the hypotenuse of a right-angled triangle, the width ($W$) and height ($H$) are derived using the scaling factor:

$$W = D \times \frac{x}{\sqrt{x^2 + y^2}}, \quad H = D \times \frac{y}{\sqrt{x^2 + y^2}}$$

Using these equations, we can calculate that a 27-inch 16:9 monitor has a physical width of approximately 23.5 inches and a height of 13.2 inches, illustrating how algebraic proportions translate directly into real-world physical measurements.

In modern software engineering and responsive web design, maintaining exact aspect ratios is crucial to prevent **Cumulative Layout Shift (CLS)**, a core web vital metric. By declaring explicit height-to-width proportions via modern CSS properties (such as aspect-ratio: 16 / 9), developers can instruct the browser to reserve spatial boxes for dynamic images, video containers, and interactive SVG diagrams before they are fully loaded. This ensures a smooth, premium user experience, avoiding jarring content jumps during page rendering.