Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2014, 22:53
Интересующийся
Отправить личное сообщение для sergey_privacy Посмотреть профиль Найти все сообщения от sergey_privacy
 
Регистрация: 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% от видимой части экрана, а внутренние блоки и фотографии внутри них делили место поровну и уменьшались пропорционально главному блоку.
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2014, 23:16
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

#container{
    max-width: 90%;
}
#imageblock{
    width: 50%;
}
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 09.02.2014, 12:53
Интересующийся
Отправить личное сообщение для sergey_privacy Посмотреть профиль Найти все сообщения от sergey_privacy
 
Регистрация: 24.01.2014
Сообщений: 12

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

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

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

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

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

Уважаемые, я задал конкретный вопрос: как средствами JS или jquery расчитывать высоту видимой части экрана и при каждом изменении окна браузера автоматически задавать размеры картинки?
Ответить с цитированием
  #4 (permalink)  
Старый 09.02.2014, 14:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

sergey_privacy,
http://learn.javascript.ru/metrics-window
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2014, 14:19
Интересующийся
Отправить личное сообщение для sergey_privacy Посмотреть профиль Найти все сообщения от sergey_privacy
 
Регистрация: 24.01.2014
Сообщений: 12

С тем же успехом можно было к гуглояндексу послать. Абсолютно бесполезный комментарий.
Я нашел, как определять размер видимой части браузера. Но как все вместе собрать в кучу, чтобы заработало - не знаю. бьюсь уже второй день с этим, пробую переделывать под себя разные примеры - не выходит.
Ответить с цитированием
  #6 (permalink)  
Старый 09.02.2014, 16:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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

Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 09.02.2014, 17:08
Интересующийся
Отправить личное сообщение для sergey_privacy Посмотреть профиль Найти все сообщения от sergey_privacy
 
Регистрация: 24.01.2014
Сообщений: 12

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

Сообщение от danik.js Посмотреть сообщение
Вообще, поосторожней, ты тут никому не нужен. Да, мы глупые и бесполезные. Но вот возьмем и пошлем тебя, да и дело с концами
Ужас какой! Как мне жить дальше со знанием, что на одном из миллионов форумов в интернете, кому то я не угодил? Да еще глашатаю общественного мнения, который всех остальных участников форума опросил и от их имени безапелляционно такие вещи заявляет. Ты нам всем не нужен, мы тебя все вместе пошлем... Не надувайте так щеки, лопните.
Ответить с цитированием
  #8 (permalink)  
Старый 09.02.2014, 17:38
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Жду критики моего варианта. И ссылку на решение, полученное тобой на другом форуме.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 09.02.2014, 18:09
Интересующийся
Отправить личное сообщение для sergey_privacy Посмотреть профиль Найти все сообщения от sergey_privacy
 
Регистрация: 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. Когда люди становятся старше, это проходит.
Ответить с цитированием
  #10 (permalink)  
Старый 09.02.2014, 18:36
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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


Сообщение от sergey_privacy
"тыкать" старшим
А.. Ну теперь то понятно почему у тебя все глупые да бесполезные )))
Ыщь, молокососы, со своими соплями тут лезут в серьзеную тему.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление окна слево под курсором мышки Кирюха =) jQuery 9 30.03.2013 06:45
Минимальный размер окна Shurik Элементы интерфейса 2 29.03.2013 16:22
Окно под размер картинки. DelJf Javascript под браузер 3 27.05.2012 21:27
how? размер поля под размер содержимого boJlb Events/DOM/Window 4 24.10.2011 17:59
Открытие нового окна под размер изображения Не_Робот Events/DOM/Window 10 30.04.2009 01:16