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

Любой уважающий себя разработчик позаботится о том, чтобы его сайт прилично выглядел в разрешении от 1024 до 1920 пикселей в ширину, и более. Но иногда (хоть и редко) возникает необходимость «уложить» контент не только в рамки по ширине, а и по высоте – например, при просмотре на ноутбуках, большинство из которых имеют небольшую высоту дисплея.

Если есть проблемы с отображением, а сайт наполнен только текстом – можно уменьшить шрифт (что нигде не используется), но если имеется графика, у нас есть возможность изменить ее размер.

В этом уроке я расскажу, как добиться плавного изменения картинки с изменением высоты окна в браузере. Предположим, что нам нужно при маленькой высоте окна сделать так, чтобы фрукт (рис.) не обрезался (но минимальное ограничение картинки все же оставим).

Эту задачу мы будем реализовывать, используя JavaScript, который будет менять css объектам – а конкретнее его размер или выравнивание.

Для начала подключим jquery

У нас есть некая картинка с фруктами, разместим ее на странице

И, непосредственно сам скрипт

 
   //событие при ресайзе (resize) окна 
   window.onresize = OnWindowResize;
   //функция которая обрабатывает изменения окна браузера    
function OnWindowResize()
{
   //задаем переменные, которые: ширины и высоты окна
   var myWidth = 0, myHeight = 0;
   //проверка на кроссбраузерность
   if( typeof( window.innerWidth ) == 'number' )
     {
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;
     } 
     else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
     {
       myWidth = document.documentElement.clientWidth;
       myHeight = document.documentElement.clientHeight;
     }
     else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
     {
       myWidth = document.body.clientWidth;
       myHeight = document.body.clientHeight;
     }
     // в результате мы получим две переменные, которые содержат ширину и высоту окна   браузера
     //функция которая делает необходимые изменение с картинкой
     setPic(myHeight);
}
     OnWindowResize(); 
     window.onresize = OnWindowResize;
     

Далее опишем функцию setPic() которая будет пропорционально уменьшать размер картинки. Например, если высота окна браузера будет меньше 470 пикселей, то картинка будет уменшена до 350 пикселей по высоте дисплея – минимально допустимый размер.

 function setPic(height){//значения высоты окна при котором картинка уменьшается
  var max_height=470;
  var min_height=350;
  //высота картинки необходима для определения коэффицента уменьшения
  var pic_height=450;

  if (height < max_height && height > min_height)
  {
     var pic=height*(pic_height/max_height)+’px’;
     $(’img’).css(’width’,pic);
  }
  else if (height > max_height)
  {
    $(’img’).css(’width’,’450px’);
  }
  else if (height < min_height)
  {
   height=min_height;
   var pic=height*(pic_height/max_height)+’px’;
   $(’img’).css(’width’,pic);
  }
 }
 

Рабочий пример можно посмотреть по ссылке

Все! Теперь при просмотре на ноутбуке картинка будет отображаться так:

Другие записи: