Растягивание картинки
Добрый день!
Я написал скрипт, который растягивает картинку, придавая ей высоту и ширину документа. <html> <head> <title>byLine</title> <style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%;} #pic { z-index:1; overflow: hidden; visibility:hidden;}</style> </head> <body> <div id="content"> <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> <h3>Lewis Carroll</h3> <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> <h3>CHAPTER I</h3> <h4>Down the Rabbit-Hole</h4> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> </div> <script> function getDocumentHeight() { return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight; } function getDocumentWidth() { return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth; } width = getDocumentWidth(); height = getDocumentHeight(); document.writeln('<img src="_images/b2.png" id="imgId" width="', width,'" height="', height,'" class="fon">') </script> </body> Тут всё хорошо работает. Но в данном файле скрипт находится внутри body. Мне же необходимо немного дополнить скрипт, чтобы он еще и на CSS влиял, а для этого нужно расположить скрипт в head. Вот что у меня получилось: <html> <head> <title>byLine</title> <style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%;} #pic { z-index:1; overflow: hidden; visibility:hidden;}</style> <script> function getDocumentHeight() { return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight; } function getDocumentWidth() { return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth; } function init(){ var imgId= document.getElementById('imgId'); imgId.width = getDocumentWidth(); imgId.height = getDocumentHeight(); } </script> </head> <body onLoad="init();"> <div id="content"> <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> <h3>Lewis Carroll</h3> <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> <h3>CHAPTER I</h3> <h4>Down the Rabbit-Hole</h4> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> </div> <img src="_images/b2.png" id="imgId" class="fon"> </body>Но оказалось, что этот вариант не работает. Я что-то не так сделал, или этот скрипт невозможно расположить в head? |
Всё должно работать.
|
Цитата:
|
Нарисуй картинку отдельным скриптом в конце документа.
|
function getDocumentHeight() { return (document.body.scrollHeight > document.body.offsetHeight)?document.body.offsetHeight:document.body.scrollHeight; } function getDocumentWidth() { return (document.body.scrollWidth > document.body.offsetWidth)?document.body.offsetWidth:document.body.scrollWidth; } так нормально работает . |
Так всё хорошо, если нет прокрутки! А если есть прокрутка, то не подходит, т.к. картинка растягивается только по высоте окна, а не по высоте всего документа!
|
Ну если принципиально,! догоняй тогда в чем же дело, а так можно в принцепе и не обращать внимание на десяток откусанных пикселей с низу картинки, тем более если размер страницы будет больше видимой части экрана то РАЗНИЦЫ уже никакой нету (у картины в том и другом скрипте размер будет одинаков)!!!!!!!
Скорее всего браузеру принципиально каким образом ты выводишь объект (изображение): через скрипт в конце документа или же отдельным тегом. |
Впечатление, что во вором варианте картинка рисуется с соблюдением пропорций т.е. высота не меньше чем ширина пропорционально.
|
Ну у меня на некоторых страницах далеко не десяток откусанных пиксеклей.. В некоторых местах есть по 1000 пикселей на белом фоне...
Действительно браузеру по ходу не всё равно , где я вставляю скрипт... Да я бы и оставил бы скрипт в конце документа, но дело в том что когда документ без прокрутки, т.е. высота документа меньше высоты окна, то тогда фон лучше вставлять через background. Вот я и хотел сделать скрипт, который определяет высоту документа, и в зависимости от этого вставлял фон через функцию или через background. А если скрипт в конце документа, то на background с его помощью не удаётся повлиять((( |
Лучше засунуть весь контент в див и сравнивать его высоту с высотой документа.
ЗЫ: function clientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth:document.body.clientWidth;} function clientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeight:document.body.clientHeight;} Не забудь написать в стилях: html, body{ height:100%; } |
Так?
<html> <head> <title>byLine</title> <style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%; height:100%;} #pic { z-index:1; overflow: hidden; visibility:hidden;}</style> <script> function clientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth:document.body.clientWidth;} function clientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeight:document.body.clientHeight;} function init(){ var imgId= document.getElementById('imgId'); imgId.style.width = clientWidth(); imgId.style.height = clientHeight(); } </script> </head> <body onLoad="init();"> <div id="content"> <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> <h3>Lewis Carroll</h3> <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> <h3>CHAPTER I</h3> <h4>Down the Rabbit-Hole</h4> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> </div> <img src="_images/b2.png" id="imgId" class="fon"> </body> Не работает. Фон растягивается по высоте окна. Ниже текст идёт уже на белом фоне. В IE ваще хрень какая-то... Или я неправильно понял Вас?! А может быть можно как-нибудь повлиять на CSS или background скриптом, находящемся в body, а не в head? Ведь та часть скрипта, которая отвечает за растяжение картинки при расположении в body работает. Тогда бы проблема была решена! |
а зачем эти извращения с растягиванием картинки и #content { position: absolute }. Есть причины не ставить картинку в фон к body?
|
Цитата:
Для решения этой проблемы я решил задать условие, которое определяет размеры текста относительно размеров экрана, чтобы определить, будет ли прокрутка. Если прокрутка будет - то со скриптом проблем нет. Если прокрутки нет, то проще вставить фон через background. И вот получается, что по идее, чтобы скрипт влиял на background, он должен находиться в head, а растягивание фона работает только в body. Поэтому нужно добиться либо чтобы обе части скрипта работали в одном месте, либо, если это возможно, как-то разбить скрипт на 2 части, и чтобы часть находящаяся в body в случае необходимости вызывала часть, находящуюся в head. Или еще что-то... |
Цитата:
|
Сам себе создал проблему. Нельзя ли по-проще быть?!
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
html,body{ width:100%; height:100%; } Тогда будет растягивать:) |
По крайней мере в данном случае это не спасает((
|
Часовой пояс GMT +3, время: 03:10. |