Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамическая подстройка картинок под размер окна (https://javascript.ru/forum/dom-window/44968-dinamicheskaya-podstrojjka-kartinok-pod-razmer-okna.html)

sergey_privacy 08.02.2014 22:53

Динамическая подстройка картинок под размер окна
 
Добрый вечер всем!
Имеется конструкция из одного блока, в котором находятся еще 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% от видимой части экрана, а внутренние блоки и фотографии внутри них делили место поровну и уменьшались пропорционально главному блоку.

danik.js 08.02.2014 23:16

#container{
    max-width: 90%;
}
#imageblock{
    width: 50%;
}

sergey_privacy 09.02.2014 12:53

Глупости говорите.

1. max-width: 90%; - это, для начала, ширина, а не высота.

2. max-height и просто height в разных браузерах работают по-разному. Один браузер расчитывает видимую часть окна браузера, другой отталкивается от общей высоты страницы. У меня двухколоночное разбиение страницы, слева блок и справа блок. Слева 2 картинки, справа много текста, превышающего размер видимой части экрана. Высота правого блока получается большая, высота всей страницы получается большая и левый блок тоже растягивается под высоту тега body. Вариант пройденный, где то работает, в других браузерах нет.

3. Высота элементов расчиталась при изначальной отрисовке страницы, потом при изменении размера окна браузера размеры картинок уже не изменяются.

4. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Т.е. картинки запросто выходят за пределы блоков.

Уважаемые, я задал конкретный вопрос: как средствами JS или jquery расчитывать высоту видимой части экрана и при каждом изменении окна браузера автоматически задавать размеры картинки?

рони 09.02.2014 14:10

sergey_privacy,
http://learn.javascript.ru/metrics-window

sergey_privacy 09.02.2014 14:19

С тем же успехом можно было к гуглояндексу послать. Абсолютно бесполезный комментарий.
Я нашел, как определять размер видимой части браузера. Но как все вместе собрать в кучу, чтобы заработало - не знаю. бьюсь уже второй день с этим, пробую переделывать под себя разные примеры - не выходит.

danik.js 09.02.2014 16:44

Цитата:

Сообщение от sergey_privacy
Глупости говорите.

Сам ты глупость))
Ты спросил про размер, но не уточнил что ты имеешь ввиду - ширину или высоту. Увидив #leftside я решил что речь о горизонтальных размерах!

Так не пробовал? http://jsfiddle.net/danya_postfactum/qQFv5/

Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами :-/

sergey_privacy 09.02.2014 17:08

Цитата:

Сообщение от danik.js (Сообщение 296769)
Сам ты глупость))

Мы с вами на брудершафт не пили, поэтому на "ты" не переходили. Хамите своим друзьям или девушке, если они такое прощают, а на форуме придерживайтесь правил уважительного общения.

Цитата:

Сообщение от danik.js (Сообщение 296769)
Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами :-/

Ужас какой! Как мне жить дальше со знанием, что на одном из миллионов форумов в интернете, кому то я не угодил? Да еще глашатаю общественного мнения, который всех остальных участников форума опросил и от их имени безапелляционно такие вещи заявляет. Ты нам всем не нужен, мы тебя все вместе пошлем... Не надувайте так щеки, лопните.

danik.js 09.02.2014 17:38

Цитата:

Сообщение от sergey_privacy
Не надувайте так щеки, лопните

Хо-хо, так ты себе это представляешь ))
Было сказано в твоих же интересах вобще-то.

Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме.

sergey_privacy 09.02.2014 18:09

Цитата:

Сообщение от danik.js (Сообщение 296780)
Хо-хо, так ты себе это представляешь ))
Было сказано в твоих же интересах вобще-то.

Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме.

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. Когда люди становятся старше, это проходит.

danik.js 09.02.2014 18:36

Цитата:

Сообщение от sergey_privacy
Критика была в третьем комментарии

То есть ты критикуешь решение еще до его появления?
И ты называешь критикой вызсказывание навроде "я чета-там намудрил, оно работало по-разному, короче, все гавно".
Назови пожалуйста версию браузера где не работает мое решение.
Решение проблемы верстки через JS - это решение через задницу.
Говорю как верстальщик с довольно серьезным опытом.


Цитата:

Сообщение от sergey_privacy
"тыкать" старшим

А.. Ну теперь то понятно почему у тебя все глупые да бесполезные )))
Ыщь, молокососы, со своими соплями тут лезут в серьзеную тему.


Часовой пояс GMT +3, время: 11:38.