08.02.2014, 22:53
|
Интересующийся
|
|
Регистрация: 24.01.2014
Сообщений: 12
|
|
Динамическая подстройка картинок под размер окна
Добрый вечер всем!
Имеется конструкция из одного блока, в котором находятся еще 2 блока, в каждом из них еще по фотографии. Код типа такого:
<div id="leftside">
<div id="topblock">
<img src="xxx.jpg" id="firstimage">
</div>
<div id="bottomblock">
<img src="yyy.jpg" id="secondimage">
</div>
</div>
Подскажите, пожалуйста полный код, как сделать изменение размера главного блока при каждом ресайзе окна браузера? Необходимо, чтобы блок не превышал 90% от видимой части экрана, а внутренние блоки и фотографии внутри них делили место поровну и уменьшались пропорционально главному блоку.
|
|
08.02.2014, 23:16
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
#container{
max-width: 90%;
}
#imageblock{
width: 50%;
}
__________________
В личку только с интересными предложениями
|
|
09.02.2014, 12:53
|
Интересующийся
|
|
Регистрация: 24.01.2014
Сообщений: 12
|
|
Глупости говорите.
1. max-width: 90%; - это, для начала, ширина, а не высота.
2. max-height и просто height в разных браузерах работают по-разному. Один браузер расчитывает видимую часть окна браузера, другой отталкивается от общей высоты страницы. У меня двухколоночное разбиение страницы, слева блок и справа блок. Слева 2 картинки, справа много текста, превышающего размер видимой части экрана. Высота правого блока получается большая, высота всей страницы получается большая и левый блок тоже растягивается под высоту тега body. Вариант пройденный, где то работает, в других браузерах нет.
3. Высота элементов расчиталась при изначальной отрисовке страницы, потом при изменении размера окна браузера размеры картинок уже не изменяются.
4. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Т.е. картинки запросто выходят за пределы блоков.
Уважаемые, я задал конкретный вопрос: как средствами JS или jquery расчитывать высоту видимой части экрана и при каждом изменении окна браузера автоматически задавать размеры картинки?
|
|
09.02.2014, 14:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
|
09.02.2014, 14:19
|
Интересующийся
|
|
Регистрация: 24.01.2014
Сообщений: 12
|
|
С тем же успехом можно было к гуглояндексу послать. Абсолютно бесполезный комментарий.
Я нашел, как определять размер видимой части браузера. Но как все вместе собрать в кучу, чтобы заработало - не знаю. бьюсь уже второй день с этим, пробую переделывать под себя разные примеры - не выходит.
|
|
09.02.2014, 16:44
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от sergey_privacy
|
Глупости говорите.
|
Сам ты глупость))
Ты спросил про размер, но не уточнил что ты имеешь ввиду - ширину или высоту. Увидив #leftside я решил что речь о горизонтальных размерах!
Так не пробовал? http://jsfiddle.net/danya_postfactum/qQFv5/
Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами
__________________
В личку только с интересными предложениями
|
|
09.02.2014, 17:08
|
Интересующийся
|
|
Регистрация: 24.01.2014
Сообщений: 12
|
|
Сообщение от danik.js
|
Сам ты глупость))
|
Мы с вами на брудершафт не пили, поэтому на "ты" не переходили. Хамите своим друзьям или девушке, если они такое прощают, а на форуме придерживайтесь правил уважительного общения.
Сообщение от danik.js
|
Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами
|
Ужас какой! Как мне жить дальше со знанием, что на одном из миллионов форумов в интернете, кому то я не угодил? Да еще глашатаю общественного мнения, который всех остальных участников форума опросил и от их имени безапелляционно такие вещи заявляет. Ты нам всем не нужен, мы тебя все вместе пошлем... Не надувайте так щеки, лопните.
|
|
09.02.2014, 17:38
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от sergey_privacy
|
Не надувайте так щеки, лопните
|
Хо-хо, так ты себе это представляешь ))
Было сказано в твоих же интересах вобще-то.
Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме.
__________________
В личку только с интересными предложениями
|
|
09.02.2014, 18:09
|
Интересующийся
|
|
Регистрация: 24.01.2014
Сообщений: 12
|
|
Сообщение от danik.js
|
Хо-хо, так ты себе это представляешь ))
Было сказано в твоих же интересах вобще-то.
Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме.
|
1. Критика была в третьем комментарии.
2.
// Первоначальная установка размеров
document.getElementById('firstimage').style.maxHeight=window.innerHeight/2.5+"px";
document.getElementById('secondimage').style.maxHeight=window.innerHeight/2.5+"px";
// Установка размеров после каждого ресайза окна
window.onresize = function()
{
document.getElementById('firstimage').style.maxHeight=window.innerHeight/2.5+"px";
document.getElementById('secondimage').style.maxHeight=window.innerHeight/2.5+"px";
}
Множитель/делитель подбирается по вкусу. Все это без хамства, троллинга, яваскриптом и кроссбраузерно. Что и требовалось. А вы, молодой человек, умеете только хамить, "тыкать" старшим и щеки надувать. Откуда я узнал, что "молодой человек"? Из манеры общения гопников у подъезда, лет 15-18. Когда люди становятся старше, это проходит.
|
|
09.02.2014, 18:36
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от sergey_privacy
|
Критика была в третьем комментарии
|
То есть ты критикуешь решение еще до его появления?
И ты называешь критикой вызсказывание навроде "я чета-там намудрил, оно работало по-разному, короче, все гавно".
Назови пожалуйста версию браузера где не работает мое решение.
Решение проблемы верстки через JS - это решение через задницу.
Говорю как верстальщик с довольно серьезным опытом.
Сообщение от sergey_privacy
|
"тыкать" старшим
|
А.. Ну теперь то понятно почему у тебя все глупые да бесполезные )))
Ыщь, молокососы, со своими соплями тут лезут в серьзеную тему.
__________________
В личку только с интересными предложениями
|
|
|
|