Math for web layout - Image resizing

Page 1 <img data-url='document/math-for-web-layout-image-resizing.html?page=1' data-page='1' class='cut-thumb lazyload' alt='Page 1: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/1.jpg' width='140' height='200' /> NewsSite.com1920px

1080px

Math for web layout

Page 2 <img data-url='document/math-for-web-layout-image-resizing.html?page=2' data-page='2' class='cut-thumb lazyload' alt='Page 2: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/2.jpg' width='140' height='200' /> 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 <img data-url='document/math-for-web-layout-image-resizing.html?page=3' data-page='3' class='cut-thumb lazyload' alt='Page 3: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/3.jpg' width='140' height='200' /> NewsSite.com

600px

1920px

1080px

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

Page 4 <img data-url='document/math-for-web-layout-image-resizing.html?page=4' data-page='4' class='cut-thumb lazyload' alt='Page 4: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/4.jpg' width='140' height='200' /> long side

short side

short sidelong side

= decimal < 1

Page 5 <img data-url='document/math-for-web-layout-image-resizing.html?page=5' data-page='5' class='cut-thumb lazyload' alt='Page 5: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/5.jpg' width='140' height='200' /> 1920px

1080px

10801920

= 0.5625

Page 6 <img data-url='document/math-for-web-layout-image-resizing.html?page=6' data-page='6' class='cut-thumb lazyload' alt='Page 6: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/6.jpg' width='140' height='200' /> NewsSite.co

600px

1920px

1080px

10801920

= 0.5625

?

X = 337.5

Page 7 <img data-url='document/math-for-web-layout-image-resizing.html?page=7' data-page='7' class='cut-thumb lazyload' alt='Page 7: Math for web layout - Image resizing' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader034.cupdf.com/reader034/viewer/2022051107/53fbdbde8d7f72f1698b47de/html5/thumbnails/7.jpg' width='140' height='200' /> NewsSite.com1920px

1080px

600px

337px

Math for web layout - Image resizing

Self Improvement