Math for web layout - Image resizing

Preview:

DESCRIPTION

Short preso on the math required to properly resize a picture for the internet.

Citation preview

NewsSite.com1920px

1080px

Math for web layout

NewsSite.com

Step 1: How wide is the column?

?

Find it with a developer tool, like firebug. Lets say ours is 600px wide.

NewsSite.com

600px

1920px

1080px

Step 2: How do we get the height? *hint: it’s algebra

long side

short side

short sidelong side

= decimal < 1

1920px

1080px

10801920

= 0.5625

NewsSite.co

600px

1920px

1080px

10801920

= 0.5625

?

X = 337.5

NewsSite.com1920px

1080px

600px

337px