Динамическая подстройка картинок под размер окна
Добрый вечер всем!
Имеется конструкция из одного блока, в котором находятся еще 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% от видимой части экрана, а внутренние блоки и фотографии внутри них делили место поровну и уменьшались пропорционально главному блоку. |
#container{ max-width: 90%; } #imageblock{ width: 50%; } |
Глупости говорите.
1. max-width: 90%; - это, для начала, ширина, а не высота. 2. max-height и просто height в разных браузерах работают по-разному. Один браузер расчитывает видимую часть окна браузера, другой отталкивается от общей высоты страницы. У меня двухколоночное разбиение страницы, слева блок и справа блок. Слева 2 картинки, справа много текста, превышающего размер видимой части экрана. Высота правого блока получается большая, высота всей страницы получается большая и левый блок тоже растягивается под высоту тега body. Вариант пройденный, где то работает, в других браузерах нет. 3. Высота элементов расчиталась при изначальной отрисовке страницы, потом при изменении размера окна браузера размеры картинок уже не изменяются. 4. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Т.е. картинки запросто выходят за пределы блоков. Уважаемые, я задал конкретный вопрос: как средствами JS или jquery расчитывать высоту видимой части экрана и при каждом изменении окна браузера автоматически задавать размеры картинки? |
sergey_privacy,
http://learn.javascript.ru/metrics-window |
С тем же успехом можно было к гуглояндексу послать. Абсолютно бесполезный комментарий.
Я нашел, как определять размер видимой части браузера. Но как все вместе собрать в кучу, чтобы заработало - не знаю. бьюсь уже второй день с этим, пробую переделывать под себя разные примеры - не выходит. |
Цитата:
Ты спросил про размер, но не уточнил что ты имеешь ввиду - ширину или высоту. Увидив #leftside я решил что речь о горизонтальных размерах! Так не пробовал? http://jsfiddle.net/danya_postfactum/qQFv5/ Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами :-/ |
Цитата:
Цитата:
|
Цитата:
Было сказано в твоих же интересах вобще-то. Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме. |
Цитата:
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. Когда люди становятся старше, это проходит. |
Цитата:
И ты называешь критикой вызсказывание навроде "я чета-там намудрил, оно работало по-разному, короче, все гавно". Назови пожалуйста версию браузера где не работает мое решение. Решение проблемы верстки через JS - это решение через задницу. Говорю как верстальщик с довольно серьезным опытом. Цитата:
Ыщь, молокососы, со своими соплями тут лезут в серьзеную тему. |
Часовой пояс GMT +3, время: 11:38. |