mise en page dégradables HTML pour comparer deux images

Comment créer la page web pour comparer deux images, de préférence en utilisant uniquement (X) HTML et CSS, JavaScript et DHTML/AJAX?mise en page dégradables HTML pour comparer deux images

La solution la plus simple serait de mettre côte à côte deux images, soit toucher ou presque toucher et centrée sur les deux ou centrés chacun dans sa propre moitié de la page. Le problème dans la solution robuste est avec dégradable partie.

les deux images en question n'a pas besoin d'avoir la même taille, par exemple, on peut être la version redimensionnée de l'autre image; une question est de savoir si l'utilisation des attributs HTML pour les étendre à la même taille visuelle, et si vous souhaitez centrer deux images ou de les aligner sur le centre de la page si elles ont une largeur inégale:
```
|_______|_______| 
|___[xx][xxxx]___| 
```
(centrée dans son ensemble) vs
```
|_______|_______| 
|____[xx][xxxx]__| 
```
(aligné sur le centre de la page)
les images peut être plus large que la moitié de la page; Je préfère éviter le défilement horizontal, alors dans ce cas, les images au lieu d'être côte à côte seront automatiquement superposées, sans utiliser JavaScript pour comparer la largeur de l'image avec la largeur de la fenêtre du navigateur et changer la disposition sur la mouche.

La mise en page dans ce cas devrait ressembler roghly comme ci-dessous:
```
|____[xxxxxxx]___| 
|_____[xxxxx]____| 
```

L'objectif de c'est d'avoir un moyen de comparer les images dans une interface web pour le système de contrôle de version.

Source

2009-05-09 Jakub Narębski

Je ne voudrais pas que les mises à l'échelle de la même taille visuelle dans un système de contrôle de version diff, mais vous pouvez utiliser:

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

à faire que (ou tout simplement préciser width si vous vouliez chaque image pour maintenir son ratio d'aspect).

Pour faire une chute en dessous de l'autre quand ils ne correspondaient pas à l'horizontale, juste flotter l'un d'entre eux à gauche:

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

(Les puristes ne seront pas comme align='center' etc. - s'il vous plaît j'imagine avez fait cela correctement à l'aide CSS 8)

Source

2009-05-09 18:28:10 RichieHindle

Ouais .. les flottant les faire apparaître côte à côte quand ils correspondent, ou vers le bas quand ils ne le font pas. Vous pouvez utiliser les technologies côté serveur (PHP, Python, RoR) si vous avez besoin de plus de contrôle, mais êtes préoccupé par la compatibilité côté client. – mpen

mise en page dégradables HTML pour comparer deux images

Répondre

Questions connexes