userstyles.org -downsize screenshots to fit window

Added by David McRitchie@userstyles, Created: Nov 23, 2008, Updated: Nov 25, 2008

With the style applied (Generated screenshot)

Description:

BEYOND OUR CONTROL: (due to overlap of images and resizing)
You may no longer be able to compare Before and After images very well with new Stylish version and formatting, unless you turn off all styling with "Read Easily" extension or using View (Alt+V) --> Page Style --> No Style, or anything else that will toggle CSS style on/off.
---

Will downsize screenshots that exceed window width and will align them vertically, if necessary, so you should be able to see most screenshots in their actual size instead of resized pictures side-by-side. If the fullsize screenshots don't fit side by side they will be shown vertically, and may then be downsized to fit window, you can view them fullsize by hovering the cursor over the image, or by using context menu "View Image". You can use the arrow keys to navigate within a hovered image. To keep mouse away from hovering on images and changing size when comparing images, suggest keeping the cursor on the vertical scrollbar.

More info

The Before and After shots will appear fullsize unless your window is not large enough to accommodate a fullsize image. Whenever two screenshots appear side by side, you will know that both screenshots are fullsize, since it was not necessary to split the second to a new line. This is a big improvement over the default and over comparable styles.

This is my modification of JasonBarnabe@userstyles's http://freestyler.ws/style/388/userstyles-org-don-t-resize-screenshots (575), with the hovering option derived from Alaaddin@userstyles's http://freestyler.ws/style/7901/userstyles-org-enlarge-screenshot-on-mouse-hover (10575). Additional comparable styles are http://freestyler.ws/style/205/userstyles-org-larger-screenshots (321), http://freestyler.ws/style/2301/userstyles-org-enlarge-screenshots-on-hover (2824), and http://freestyler.ws/style/4934/userstyles-org-screenshots-unresized-vertical (6158).

xren@userstyles pointed out his http://freestyler.ws/style/8952/userstyles-org-elegant-blue (11912) and used downsize to window from there instead of to a fixed width - Thanks!.

This style can be tested with the very large screen shots found at http://freestyler.ws/style/3199/painted-black-userstyles-org (3866), which have images 1338x611 and 1354x551, so will be aligned vertically since full sized before and after images cannot be shown side by side.
Because they are still too large, both images will be reduced in size to fit screen. Hover over an image to view full size. To navigate within a large fullsize image use the arrow keys so you don't change mouse position by attempting to use scroll bars.

A style that has images that could appear side by side without reduction will appear side by side without the default reduction, see http://freestyler.ws/style/124144/keyword-addition-for-add-change-bookmark-fx3 (9029) where the images are 311px x 181px and 347px x 313px. Without restyling they would appear to have the same width, but the after image is actually wider.

If the two images cannot appear side by side full size then they will appear on above / below each other and will be full-size if possible; otherwise, reduced to fit window width.

If the size of an image is reduced because it cannot fit in the window, then click on the plus-cursor (+) to see actual size.

In another style there is a tremendous reduction both horizontally and vertically in the before and after pictures for http://freestyler.ws/style/124148/bookmarks-toolbar-blue-folders-red-bookmarks reduced from 623px x 24px to 340px x 15px, without this style they would appear to be about the same size but in reality about twice as many bookmark folders could be shown in the same space.

The styles that I use can be seen briefly described at http://kb.mozillazine.org/User:Dmcritchie

Recommended Customization:
/* customization: make userstyles readable after 2009-06-15 change */
h1 {color:white !important; background-color: #5573A0 !important;
font-variant: normal !important;}

Updates since 2008-11-24
2008-11-25 incorporate most of downsize screenshot portion found in 11912