Разлагаемый HTML-макет для сравнения двух изображений - PullRequest
Новая
       9

Разлагаемый HTML-макет для сравнения двух изображений

1 голос
/ 09 мая 2009

Как создать веб-страницу для сравнения двух изображений, желательно с использованием только (X) HTML и CSS, без JavaScript и DHTML / AJAX?

Самым простым решением было бы поместить два изображения рядом, либо касаясь, либо почти касаясь и центрируя оба, или каждое по центру на своей половине страницы. Проблема в надежном решении заключается в разлагаемой части.

  • эти два изображения не обязательно должны иметь одинаковый размер, например, одно изображение может быть изменено по размеру для другого изображения; один вопрос будет заключаться в том, использовать ли атрибуты HTML для масштабирования их до одинакового визуального размера и центрировать ли два изображения или выравнивать их по центру страницы, если они имеют неравную ширину: 

    |_______|_______|
|___[xx][xxxx]___|

    (по центру в целом) против 

    |_______|_______|
|____[xx][xxxx]__|

    (по центру страницы)

  • изображения могут быть шире, чем половина страницы; Я бы предпочел избегать горизонтальной прокрутки, поэтому, возможно, в этом случае изображения вместо того, чтобы располагаться рядом, были бы друг над другом, и это должно быть автоматическим, без использования JavaScript для сравнения ширины изображения с шириной окна браузера и изменения макета на муха.

    Макет в этом случае должен выглядеть примерно так: 

    |____[xxxxxxx]___|
|_____[xxxxx]____|

Цель состоит в том, чтобы иметь возможность сравнивать изображения в веб-интерфейсе для системы контроля версий.

1 Ответ

4 голосов
/ 09 мая 2009

Я бы не хотел, чтобы они масштабировались до одинакового визуального размера в системе контроля версий, но вы можете использовать: 

<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' и т. Д. - пожалуйста, представьте, что я сделал это правильно, используя CSS 8 -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...