2つの画像を比較するための分解可能なHTMLレイアウト

JavaScriptとDHTML/AJAXなしで、（X）HTMLとCSSのみを使用して2つの画像を比較するWebページを作成する方法は？2つの画像を比較するための分解可能なHTMLレイアウト

最も簡単な解決策は、2つの画像をタッチしたり、ほぼタッチしたり、どちらかにセンタリングしたり、それぞれをページの半分に合わせて並べたりすることです。ロバストな解決策の問題は、分解性部分である。

問題の2つのイメージは同じサイズを持つ必要はありません。たとえば、もう一方のイメージのサイズを変更することができます。
```
|_______|_______| 
|___[xx][xxxx]___| 
```
（全体として中心に：一つの質問は、HTMLが同じ視覚サイズにそれらを拡張する属性を使用するかどうかを、2枚の画像を中央にするかどうか、彼らが不均等な幅を持っている場合、ページの中央にそれらを合わせるだろう）
```
|_______|_______| 
|____[xx][xxxx]__| 
```
対（ページの中央に揃え）
画像がページの半分より広いかもしれません。私はむしろ横スクロールを避けるでしょう。そのような場合には、横に並んでいるのではなく、横に並んだイメージが上になるでしょう。JavaScriptを使用してイメージの幅とブラウザウィンドウの幅を比較し、飛行機。

この場合のレイアウトは以下のようにroghlyになります。
```
|____[xxxxxxx]___| 
|_____[xxxxx]____| 
```

目標これのは、バージョン管理システムのためのWebインターフェイスで画像を比較する方法を持つことです。

2009-05-09 Jakub Narębski

私は彼らがバージョン管理差分システムで同じ視覚サイズにスケーリングたいとは思わないでしょうが、あなたは使用することができます

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

はそれを行う（またはちょうどあなたが各画像は維持したい場合widthを指定しますアスペクト比）。 - 私は「想像してください

<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>

（純粋主義者はalign='center'などを好きではないだろう。彼らはちょうど左にそれらのいずれかをフロート、水平に合わなかったときに、他の下の1つの秋を作るために

CSSを使って正しく実行しました8-）

出典

2009-05-09 18:28:10 RichieHindle

ええと、それらを浮かせると、フィットするときに並んで表示されます。より多くの制御が必要だが、クライアント側の互換性に懸念がある場合は、サーバー側のテクノロジ（PHP、Python、RoR）を使用できます。 – mpen

2つの画像を比較するための分解可能なHTMLレイアウト

答えて

関連する問題