Доброго времени суток!
Думаю мой вопрос будет весьма познавательным для верстальщиков, будучи отвеченным, поэтому букв много + понятный код. =)
Интересует резиновость картинки в резиновом диве, т.е.:
Есть у меня например 4 блока (постараюсь приблизительно понятно нарисовать =)) )
Все находится в одном большом диве (с его помощью я задаю минимальную возможную ширину (1024px), чтобы сайт не складывался как гармошка)
Далее я помещаю в Блок (тот что большой) Таблицу, задаю стиль для ячеек и блоков внутри них.
______________________________
|............|..........................|............|
|.200px..|.Резиновый блок.|.200px..|
|............|..........................|............|
| ______|_______________|_______|
|...................................................|
|..............Блок 100% ширины.......|
|_____________________________|
Что-то похожее на это =))
Верхние блоки по краям имеют статическую ширину 200px.
Нижний блок имеет ширину 100% и высоту 200px.
Центральный верхний блок (Резиновый) меня как раз и интересует.
Табличной ячейке с Резиновым блоком я не задаю ширину, пусть шатается как угодно, но самому блоку задаю минимальную ширину 624px (1024px -( 200px * 2) - вычисление).
В общем, есть у меня одна картинка, которую мне необходимо внедрить в центральный блок таким образом, чтобы в зависимости от ширины экрана пользователя да и при простом сжатии/разжатии браузера картинка корректно отображалась, при этом ездила от максимально задаваемой ширины до минимально задаваемой (600px).
При этом вся верстка учитывается без прокрутки (только в случае разрешения браузера менее 1024px на 700px появляется scroll).
Нашел один скриптик для резинового фона, но он просто напросто перекрывает весь код, не учитывая вложенность картинки в блок (на весь экран браузера). Данный скрипт применяется с библиотекой jquery. Все работает, но не так как надобно.
Собственно вот код:
// Шаблон
<body>
<div class="global">
<table>
<tr>
<td class="td_left">
<div class="left">
</div>
</td>
<td>
<div class="center"> // Резиновый Блок
<img src="BACKGROUND.PNG" id="background-image"/>
</div>
</td>
<td class="td_right">
<div class="right">
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="bottom">
</div>
</td>
</tr>
</table>
</div>
</body>
Примечание:
-------------------------------------------------------------------------------
// CSS
* {
margin: 0px;
padding: 0px;
}
.global { /* Главный DIV */
display: block;
position: relative;
min-width: 1024px;
width: 100%;
height: 100%;
min-height: 700px;
}
.global table { /* Стиль для таблицы */
width: 100%;
height: 100%;
min-height: 700px;
margin: 0px;
border-spacing: 0px;
border-collapse: collapse;
border: none;
}
.global table tr td { /* Стиль для столбцов */
padding: 0px;
}
.global table .td_left { /* Левая ячейка Верхнего блока */
width: 200px;
height: 100%;
min-height: 500px;
}
.global table .td_right { /* Правая ячейка Верхнего блока */
width: 200px;
width: 200px;
height: 100%;
min-height: 400px;
}
.left { /* Левый Верхний блок */
display: block;
position: relative;
left: 0px;
top: 0px;
float: left;
width: 200px;
height: 100%;
min-height: 500px;
background: url(button_left.png) repeat-y;
}
.center { /* Центральный блок блок */
display: block;
position: relative;
width: 100%;
min-width: 624px;
height: 100%;
min-height: 400px;
overflow: hidden;
}
.right { /* Правый Верхний блок */
display: block;
position: relative;
right: 0px;
top: 0px;
width: 200px;
height: 100%;
min-height: 500px;
background: url(button_right.png) repeat-y;
}
.bottom { /* Нижний блок */
display: block;
position: relative;
right: 0px;
top: 0px;
width: 100%;
min-width: 1024px;
min-height: 170px;
height: 20%;
max-height: 200px;
background: url(button_bottom.png) repeat-x;
}
Пример работы с резиновым фоном на весь экран.
/* Подключаю библиотеку Jquery */
<script type="text/javascript" src="scripts/jquery.js"></script>
/* Сам скрипт */
_______________
<script>
$(document).ready(function() {
var bgImage = $('#background-image');
function resizeImg() {
var imgwidth = bgImage.width(),
imgheight = bgImage.height(),
winwidth = $(window).width(),
winheight = $(window).height(),
widthratio = winwidth / imgwidth,
heightratio = winheight / imgheight,
widthdiff = heightratio * imgwidth,
heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImage.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImage.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
$("#background-image").show();
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
});
</script>
-------------------------------
/* CSS для Картинки */
#background-image { // ID background-image так же указан в скрипте
position: absolute;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: 100%;
display: none;
}
---------------------------------
Собственно скрипт работает со следующим кодом:
<body>
<img src="BACKGRIUND.PNG" id="background-image">
</body>
_____________________________________________________
Большое спасибо за внимание и терпение.
Прошу вашей помощи в разрешении данного вопроса (с резиновым блоком и его фоном, либо картинкой).
Приветствуется информация, ссылки, другие варианты решения данной задачи =)
Еще раз спасибо =)
Примечание:
Эх, долго ждать не мог, пришлось изучать Jquery. Скрипт написал используя jquery resize();
6aitan (Igor Hal) - надеюсь что код работает, проверю в свободное время. Но все рано уверен что это не то, что нужно. Пришлось делать резиновую кроссбраузерную верстку only на jquery. Удивительно как в экстремальных условиях быстро библиотеки учатся, учитывая только начальные знания JS. Собственно скрипт делал по подобию имеющегося в вопросе. Всем спасибо, тем кто прочел, особенно тому, кто помог в поиске ответа.
Примечание:
HTML код в BODY сократился до такого )))
------------------------------------------------------------------
<a class="lblock">
</a>
<a class="cblock">
<img class="cimage" src="BACKGROUND.PNG" />
</a>
<a class="rblock">
</a>
<a class="bblock">
</a>
Ну а в остальном все решается с помощью jquery. Удачи интересующимся в освоении =)
К сожалению конфет нахаляву не будет =)