Decomposable HTML layout for comparing two images
How do I create a web page to compare two images, preferably using only (X) HTML and CSS, no JavaScript and DHTML / AJAX?
The simplest solution would be to put the two images side by side together, touching or nearly touching and centering both, or each focusing on its half of the page. The problem in a reliable solution consists of a degradable part.
-
the two images in question must not be the same size, for example, you can resize another image; one question would be whether HTML attributes should be used to scale them to the same visual size, and to center the two images, or align them to the center of the page if they are unequal in width:
|_______|_______| |___[xx][xxxx]___|
(centered on the whole) vs
|_______|_______| |____[xx][xxxx]__|
(aligned to the center of the page)
-
images can be more than half a page; I would prefer to avoid horizontal scrolling, so maybe in this case the images, instead of being next to each other, would be one above the other, and this should be automatic, without using JavaScript to compare the width of the image with the width of the browser window and change layout to fly.
The layout in this case should look rough as shown below:
|____[xxxxxxx]___| |_____[xxxxx]____|
The purpose of this is to provide a way to compare images in a web interface for source control.
a source to share
I wouldn't want them to scale to the same visual size in source control, but you could use:
<img width='x' height='y'>
for that (or just specify width
if you want each image to preserve its aspect ratio).
To drop below the other when they don't fit horizontally, just place one of them to the left:
<html><body><p align='center'>
<img src='http://stackoverflow.com/content/img/so/logo.png' float='left'>
<img src='http://stackoverflow.com/content/img/so/logo.png'>
</p></body></html>
(Purists won't like it align='center'
, etc - imagine I did it right using CSS 8-)
a source to share