Be able to resize an image as specified to maintain or adjust the aspect ratio of an image

Topic 12 – Images

Objective

Be able to resize an image as specified to maintain or adjust the aspect ratio of an image.

1. What is Aspect Ratio?

The aspect ratio of an image is the relationship between its width and its height. It is usually expressed as a ratio of two whole numbers.

$$ \text{Aspect Ratio} = \frac{\text{width}}{\text{height}} $$

For example, an image that is 800 px wide and 600 px high has an aspect ratio of $\frac{800}{600}= \frac{4}{3}$.

2. Why Keep the Aspect Ratio?

• Preserves the original shape of the picture – no stretching or squashing.
• Prevents distortion that can make the image look unprofessional.
• Ensures the image fits correctly in documents, presentations or web pages.

3. Calculating New Dimensions While Maintaining Aspect Ratio

When you know either the new width or the new height, you can calculate the other dimension using the original aspect ratio.

Formula when new width is given:

$$ \text{new height} = \frac{\text{new width}}{\text{original aspect ratio}} $$

Formula when new height is given:

$$ \text{new width} = \text{new height} \times \text{original aspect ratio} $$

4. Step‑by‑Step Example

Original image: 1200 px × 800 px (aspect ratio $= \frac{1200}{800}= \frac{3}{2}$).

Task: Resize the image to a width of 900 px while keeping the aspect ratio.

1. Identify the original aspect ratio: $\frac{3}{2}=1.5$.
2. Apply the formula for new height: $$\text{new height}= \frac{900}{1.5}=600\text{ px}$$
3. Resulting dimensions: 900 px × 600 px.

5. Adjusting the Aspect Ratio (When Desired)

Sometimes you need to change the aspect ratio, for example to fit a specific frame or layout. This can be done by:

• Cropping: Removing part of the image so that the remaining portion has the required ratio.
• Stretching/Compressing: Changing width and height independently – usually avoided unless the design explicitly requires it.

6. Practical Methods in Common Software

Software	Maintain Aspect Ratio	Change Aspect Ratio
Microsoft Paint	Drag a corner handle while holding Shift (or use the "Resize" dialog and check "Maintain aspect ratio").	Drag a side handle without holding Shift or uncheck the "Maintain aspect ratio" box.
Adobe Photoshop	Enter new width or height in the Image Size dialog and ensure the chain‑link icon is active.	Deactivate the chain‑link icon, then enter both width and height.
GIMP	Use the Scale Image dialog with the chain icon linked.	Unlink the chain icon, then set the desired width and height.

7. Quick Reference Table for Common Aspect Ratios

Ratio	Common Name	Typical Uses
1 : 1	Square	Profile pictures, icons
4 : 3	Standard TV / Computer Monitor (old)	Presentations, printed photos
16 : 9	Widescreen	Modern video, YouTube, PowerPoint slides
3 : 2	35 mm photography	Digital cameras, printed photos

8. Common Pitfalls and How to Avoid Them

• Forgetting to lock the ratio: Always check that the “maintain aspect ratio” option is active before resizing.
• Resizing by percentage only: Percentage scaling can lead to rounding errors; calculate exact pixel values when precision is required.
• Changing resolution unintentionally: Distinguish between pixel dimensions and DPI (dots per inch). DPI affects print size, not on‑screen appearance.

9. Self‑Assessment Questions

1. An image is 1920 px × 1080 px. What will be its height if you resize the width to 1280 px while keeping the aspect ratio?
2. You need an image that fits a 5 cm × 7 cm space on a printed flyer at 300 dpi. What pixel dimensions are required?
3. Explain the difference between cropping an image to change its aspect ratio and stretching it.

10. Suggested Diagram

11. Summary

Resizing images while maintaining aspect ratio preserves visual integrity. Use the simple proportion formulas to calculate missing dimensions, and always verify that the “maintain aspect ratio” option is active in your editing software. When a different aspect ratio is required, consider cropping rather than stretching to avoid distortion.