Как вписать объект в div блок?

[Elmirill]

Здравствуйте!

Возникла необходимость вписать объект (допустим картинку) в блок div таким образом, чтобы картинка ужималась (растягивалась) до размера div блока. Для примера: на сайте есть большая картинка по центру, и эта картинка при открытии сайта в браузере автоматом масштабируется до размера окна браузера.

Конкретно интересует два аспекта:

1). Как вписать картинку с сохранением пропорций.

2). Как растянуть картинку по всему блоку без сохранения пропорций.

Спасибо.

[Great Rash]

1). Как вписать картинку с сохранением пропорций.

Задать только один параметр (или width или height) равным 100%, тогда пропорции сохранятся. Ну или считать на JavaScript.

2). Как растянуть картинку по всему блоку без сохранения пропорций.

Задать оба параметра и ширину, и высоту.

У родителя должна быть обязательно задана высота (ширина не обязательно).

[Elmirill]

В том то и дело, что родитель не имеет постоянной величины, а подстраивается под окно браузера. И в этом случае, картинка не помещается на экране. Картинка должна ужиматься до текущего размера окна.

[psywalker]

Держи, сделал пример, тут картинка подстраивается под размер окна при каждой загрузке

http://psywalker.ru/Forum/JS/Primitive/Set...gPlavnoe/3.html

[Elmirill]

psywalker, спасибо за наглядный пример.

На самом деле, чуть не то, что я имел в виду.

Можно сделать так, чтобы картинка масшабировалась при смене размеров окна, а не только при загрузке?

И, самое главное, можно ли обойтись без JS? Силами html, css и php?

Чтобы было нагляднее, вот сайт: http://www.delirio.pro/

На нем два объекта: картинка как фон, которая растягивается под окно браузера, и картинка с лого и надписями, которая также должна быть в центре и масштабироваться под окно, но только с сохранением пропорций. Сама картинка заключена в два блока - один родительский, и занимает все окно браузера, второй центрирует картинку по вертикали и горизонтали внутри родительского. Цель - масштабировать картинку на весь родительский блок, чтобы пользователь с плазменной панелью, также как и пользователь с монитором на разрешении 1024х768 видели картинку на весь экран. Ну и повторюсь, желательно методами html, css и php.

Оффтопик: существует ли возможность использования векторной графики на сайте?

[psywalker]

А, ну конечно такое возможно с помощью html, css. На том сайте это делается обычной картинкой, которая лежит абсолютом нижнем слоем и растянуто на весь экран.

Вот тебе пример кстати http://psywalker.ru/Portfolio/AndreyDekhty.../main-page.html

[Elmirill]

Вроде бы почти разобрался.

Непонятно только, можно ли масштабировать одновременно по width и по height, но с сохранением пропорций? то есть, если окно вытянуто по горизонтали, то масштабирование идет по height. Окно вытянуто по вертикали - по width.

И еще такой нюанс:

На странице два блока - один родитель, на весь экран, второй в родителе, и он отцентрирован по вертикали и горизонтали внутри родителя (родитель имеет отображение таблицы). Так вот, когда прописываю второму блоку параметры width и height 80%, сбивается центровка по горизонтали, он съезжает вправо. От чего такое может быть?

Edited August 4, 2010 by Elmirill

[psywalker]

Вот тут находится 5 разных вариантов, попробуй подобрать себе, то что ты хочешь или допилить какой нибудь из них.

http://psywalker.ru/Forum/AndreyD/

[Elmirill]

Спасибо, буду ковыряться.

[psywalker]

Спасибо, буду ковыряться.

Давай, удачи тебе

[Elmirill]

Спасибо, вопрос решен!

Непонятно одно: можно ли масштабировать одновременно по width и по height, но с сохранением пропорций? то есть, если окно вытянуто по горизонтали, то масштабирование идет по height. Окно вытянуто по вертикали - по width. Реально ли это?