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

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

Форум программистов > JavaScript: для новичков > трабл с background у div.

Автор: archy 22.4.2008, 11:55

Насколько я понял, стандартными возможностями хтмля не решить, может, возможно это реализовать на джскрипте? Репост из хтмл-ветки.
Тут вот понадобилось сделать такую штуку, а не знаю как ...
Есть картинка большого размера, скажем 3000х2000пх. Есть хтмл-файл с единственным дивом. Он растянут на 100% по высоте и ширине. Разрешение моего экрана, скажем 1280х1024. Требуется кинуть на бэкграунд дива данную картинку (с этим понятноsmile), причем чтобы по меньшей стороне он вписался аккурат в див, то есть высота картинки стала = высоте дива (в моем случае - 1024пх за вычетом). Соответственно пропорционально должна измениться и ширина. Как это сделать - не понятно. Добился только того, чтобы картинка ресайзилась под размер самого дива и соотв. размер самого окна. При непропорциональном изменении размера окна получается хрень, а надо чтобы выглядело более-менее удобоваримо. Кто что предложит?) Заранее спасибо.

Автор: LSD 22.4.2008, 12:06

Модератор: перемещено из Java.

Автор: bars80080 22.4.2008, 12:28

я же тебе написал javascript, а не java

вот примерно так:

Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
#page { position: absolute; top: 0px; left: 0px; width: 100%; }
</style>
<script>
var fon = new Image();
fon.src = 'zzz.jpg';
function resizing() {
    var timg = document.getElementById('imgfon');
    y = document.body.clientHeight;
    x = document.body.clientWidth;
    y1 = Math.floor((x / fon.width) * fon.height);
    if(y1 > y) {
        x1 = Math.floor((y / fon.height) * fon.width);
        y1 = y; }
    else { x1 = x; }
    timg.style.width = x1; timg.style.height = y1;
}
</script>
</head>
<body onload="resizing();" onresize="resizing();">
<div id="fon"><img id="imgfon" src="zzz.jpg" /></div>
<div id="page">
content
</div>
</body>
</html>

Автор: archy 22.4.2008, 12:40

Перепутал, случайно тыкнул не туда)
Не пашет, картинка просто вставляется с реальным размером.

Автор: bars80080 22.4.2008, 13:18

да? а нет возможности выложить это в сеть, а то у меня нормально работает под ИЕ6, ФФ и оперой

может отключено выполнение скриптов?

Автор: archy 22.4.2008, 13:29

не, у меня всё ок. работает только под оперой почему-то ...
http:// franki.su/stuff/1.html

Автор: bars80080 22.4.2008, 13:36

это доктайп виноват, если выкинуть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
то всё будет ок

к сожалению, я не знаю корректного доктайпа

Автор: archy 22.4.2008, 13:54

выкинул доктайп и в осле теперь картинка принимает форму квадрата со стороной, равной высоте окна. в фф тоже не всё гладко - картинка вписывается в ширину, а не высоту - получается зазор снизу. мне что-то подсказывает, что стоит на эту идею забить))

Автор: bars80080 22.4.2008, 14:20

чёрт его знает, понятия не имею почему у тебя не работает

вот смотри, http://interes.uzelok.net/exam/resize1.php здесь нормально ведь?

Автор: archy 22.4.2008, 14:31

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