用于比较两个图像的可降级HTML布局

How to create web page for comparing two images, preferably using only (X)HTML and CSS, without JavaScript and DHTML / AJAX?

如何创建用于比较两个图像的网页,最好只使用(X)HTML和CSS,不使用JavaScript和DHTML / AJAX?

The simplest solution would be to put two images side by side together, either touching or almost touching and centered both, or each centered in its own half of page. The problem in robust solution is with degradable part.

最简单的解决方案是将两个图像并排放在一起,无论是触摸还是几乎触摸和居中,或者每个图像都集中在其自己的一半页面中。稳健解决方案中存在的问题是可降解部分。

the two images in question doesn't need to have the same size, for example one can be resized version of the other image; one question would be whether to use HTML attributes to scale them to the same visual size, and whether to center two images or align them to center of the page if they have unequal width:

有问题的两个图像不需要具有相同的大小,例如一个可以是另一个图像的大小调整版本;一个问题是,是否使用HTML属性将它们缩放到相同的视觉大小,以及是否将两个图像居中或如果它们具有不相等的宽度则将它们对齐到页面的中心:
```
|_______|_______|
|___[xx][xxxx]___|
```
(centered as a whole) vs

(以整体为中心)vs
```
|_______|_______|
|____[xx][xxxx]__|
```
(aligned to center of page)

(与页面中心对齐)
the images might be wider than half of the page; I'd rather avoid horizontal scrolling, so perhaps in such case images instead of being side by side would be one above another, and this should be automatic, without using JavaScript to compare width of image with the width of browser window and changing layout on the fly.

图像可能比页面的一半宽;我宁愿避免水平滚动,所以也许在这种情况下,图像而不是并排是一个在另一个之上,这应该是自动的,而不使用JavaScript来比较图像的宽度与浏览器窗口的宽度和更改布局苍蝇

The layout in this case should look roghly like below:

在这种情况下的布局应该看起来像下面的roghly:
```
|____[xxxxxxx]___|
|_____[xxxxx]____|
```

The goal of this is to have a way to compare images in a web interface for version control system.

这样做的目的是有一种方法来比较Web界面中的图像以用于版本控制系统。

1 个解决方案

#1

I wouldn't want them scaled to the same visual size in a version control diff system, but you could use:

我不希望它们在版本控制差异系统中缩放到相同的视觉大小,但您可以使用:

<img width='x' height='y'>

to do that (or just specify width if you wanted each image to maintain its aspect ratio).

要做到这一点(或者只是指定宽度,如果你想让每个图像保持其宽高比)。

To make one fall below the other when they didn't fit horizontally, just float one of them to the left:

当它们不适合水平放置时,使一个落在另一个之下,只需将其中一个浮动到左侧:

<html><body><p align='center'>
<img src='http://*.com/content/img/so/logo.png' float='left'>
<img src='http://*.com/content/img/so/logo.png'>
</p></body></html>

(The purists won't like align='center' etc. - please imagine I've done that properly using CSS 8-)

(纯粹主义者不喜欢align ='center'等等 - 请想象我已经使用CSS 8-正确完成了这一点 - )

#1