Most of the time I hold a camera normally, but sometimes a vertical shot is the most appropriate. Occasionally I will perform a vertical crop of a horizontal image (but not often – this knocks out a lot of image data).
In presenting my photo work in sets meant to be scrolled top to bottom, as I like to do, I encountered a problem with the integration of vertically-oriented (“tall”) images into groups of horizontally-oriented (“wide) images. Only around five percent of my photos are tall, but they are no less important.
Unless coded for absolute size, typically designers will write CSS that instructs browsers to resize images dynamically as the window size changes (as a result of device-to-device shifts or as a user re-sizes the browser window), until a boundary is hit. Usually the boundary will manifest as a vertical element – the edge of the window, or the beginning of a sidebar menu (an exception being if the photos are meant to be scrolled horizontally, in which case the opposite problem would emerge). So, when a wide image hits the edge of a screen, the horizontal reference dimension for its size is locked and the image is re-sized proportionally to that value. Unfortunately this produces annoying results for tall images because the proportions are flipped; when a tall image hits the boundary, it is re-sized proportionally, but in this case the proportions are too large and the image is rendered far too tall, forcing the user to scroll up and down or visit the image file in isolation to view it at a proper, smaller size, without having to scroll. Not a good thing!
Until now, the only way to deal with this has been to set absolute pixel values for the image dimensions. This works but still breaks the flow of dynamic re-sizing established with the wide images in the set, as well as requiring you to pick an absolute size that will function as a “middle- ground” across a number of devices. If displaying pictures of various ratios in sets in a pleasing fashion is important to you, this is obviously not acceptable.
Now I can present wide and tall images in the same set, without worrying the viewer will be forced to scroll to see the entirety of a portrait image. Thank you Evan – your plugin solved a huge problem for me!