I got around this problem by doing the following steps.
-
Find out screensize we will call this
<screenwidth>and<screenheight>for now. -
I made my browser fullscreen. I used Chrome for this as the header bar disappeared and I got the full screen height for my screenshot. This is not necesary however.
-
If you have got a header subtract it from the screen height.
<height> = <screenheight> - <header>. -
If you have a vertical scrollbar subtract this width from the width.
<width> = <screenwidth> - <scrollbar-width>. -
Now in most screens these days especially laptops the width is ample but the height is not in which case we have to find out the width that is proportional to the height.
Therefore, <width-screenshot> = <height>/450 * 600 if you do not get whole number round it to the nearest even number.
-
Now we have to get an so that we get our website show within the size
<width-screenshot>x<height>. To calculate that we do(<screenhieght> - <scrollbar-width> - <width-screenshot>)/2. -
Open up and image manipulation program choose the crop function and input the width, height and x-offset values. Then crop and save the image.
-
Open the saved image and choose the resize option and set the width to 600. The height should automatically become 450. Which is the desired size save the image.
This is a repeatable process and once you have the numbers it is just a question of reuse.
Hope that helps someone.
nav