VPF::сплюснуть фоновый рисунок - Форум программистов

SneG0K

Дата 19.8.2009, 01:20 (ссылка)

(нет голосов)

Загрузка ...

Max Mara

Профиль
Группа: Завсегдатай
Сообщений: 1887
Регистрация: 1.12.2007
Где: Wis Dells

Репутация: нет
Всего: 54

Есть фоновый рисунок. Он сильно большой в ширину. Как его можно сплюснуть? на чистом CSS или javaScript.

artsb

Дата 19.8.2009, 08:25 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

Репутация: нет
Всего: 64

Сразу скажу, что средствами HTML и CSS не получится. А вот на счёт javascrip - не знаю.

--------------------

Чем отличается умный человек от мудрого?
Умный - выпутается из любой ситуации.
Мудрый - просто в неё не попадёт.

skyboy

Дата 19.8.2009, 09:12 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

вместо background используй спозиционированную нужным образом картинку. у background нет свойства типа "scale".

Код


<div style="width: 256px; height: 384px;overflow: hidden;">
....
<img src="background_image_1024x768.jpg" style="display: block; position: relative; top: -384px;  width: 100%; height: 100%;" />
</div>

Добавлено через 3 минуты и 32 секунды
хотя обычно, если и используется большой фон - то для "резиновых" элементов, чтоб при любом разумном размере у элемента был фон. Мне сложно представить ситуацию, когда необходимо "сплющивать" фон. Уж лучше тогда обрезать и положить уже обрезанную картинку.

bars80080

Дата 19.8.2009, 09:35 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

как-то так:

Код


<html><head>
<style>
* { margin: 0px; padding: 0px; }
#fon img { width: 100%; height: 100%; }
#page { position: absolute; top: 0px; left: 0px; width: 100%; }
</style>
</head>
<body>
<div id="fon"><img src="zzz.jpg" /></div>
<div id="page">
content 
</div>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »