Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > сплюснуть фоновый рисунок

Автор: SneG0K 19.8.2009, 01:20

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

Автор: artsb 19.8.2009, 08:25

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

Автор: skyboy 19.8.2009, 09:12

вместо 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

как-то так:

Код


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