Math for web layout - Image resizing
7
NewsSite.com 1920px 1080px Math for web layout
-
Upload
drake-martinet -
Category
Self Improvement
-
view
575 -
download
3
description
Short preso on the math required to properly resize a picture for the internet.
Transcript of Math for web layout - Image resizing
![Page 1: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/1.jpg)
NewsSite.com1920px
1080px
Math for web layout
![Page 2: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/2.jpg)
NewsSite.com
Step 1: How wide is the column?
?
Find it with a developer tool, like firebug. Lets say ours is 600px wide.
![Page 3: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/3.jpg)
NewsSite.com
600px
1920px
1080px
Step 2: How do we get the height? *hint: it’s algebra
![Page 4: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/4.jpg)
long side
short side
short sidelong side
= decimal < 1
![Page 5: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/5.jpg)
1920px
1080px
10801920
= 0.5625
![Page 6: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/6.jpg)
NewsSite.co
600px
1920px
1080px
10801920
= 0.5625
?
X = 337.5
![Page 7: Math for web layout - Image resizing](https://reader034.fdocuments.in/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/7.jpg)
NewsSite.com1920px
1080px
600px
337px