Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Уменьшение картинки в зависимости от разрешния

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
CTAPu4OK
Отправлено: 11 Ноября, 2011 - 14:16:01
Post Id



Гость


Покинул форум
Сообщений всего: 67
Дата рег-ции: Июль 2008  


Помог: 0 раз(а)
Имеется картинка 800x600, при разрешении в 1600x1280... если же разрешение экрана будет 1024х768 то картинка должна уменьшится на некий процент без смещений по дизайну =)

Требуется: Как вычислить этот процент в зависимости от разрешения браузера ?
 
 Top
EuGen Администратор
Отправлено: 11 Ноября, 2011 - 15:12:03
Post Id


Профессионал


Покинул форум
Сообщений всего: 9095
Дата рег-ции: Июнь 2007  
Откуда: Berlin


Помог: 707 раз(а)
Имеется ввиду, что нужно вычислять новые измерения изображения, так, чтобы созранять пропорции и влезло в новое разрешение?
Тогда примерно так:
PHP:
скопировать код в буфер обмена
  1. function refactorSize($rgSizeFrom, $rgSizeTo)
  2. {
  3.    if(!is_array($rgSizeFrom)||!is_array($rgSizeTo)||count($rgSizeFrom)!=2||count($rgSizeTo)!=2)
  4.    {
  5.       throw new Exception('Given dimensions are illegal');
  6.    }
  7.    if(array_key_exists('height', $rgSizeFrom)&&array_key_exists('width', $rgSizeFrom))
  8.    {
  9.       $rgSizeFrom=array($rgSizeFrom['height'], $rgSizeFrom['width']);
  10.    }
  11.    if(array_key_exists('height', $rgSizeTo)&&array_key_exists('width', $rgSizeTo))
  12.    {
  13.       $rgSizeTo=array($rgSizeTo['height'], $rgSizeTo['width']);
  14.    }
  15.    $rgResult   = array();
  16.    $heightFrom = $rgSizeFrom[0];
  17.    $widthFrom  = $rgSizeFrom[1];
  18.    $heightTo   = $rgSizeTo[0];
  19.    $widthTo    = $rgSizeTo[1];
  20.    
  21.    if($heightTo>$widthTo)
  22.    {
  23.       $rgResult['width']  = $widthTo;
  24.       $rgResult['height'] = $heightFrom*$widthTo/$widthFrom;
  25.    }
  26.    else
  27.    {      
  28.       $rgResult['width']  = $widthFrom*$heightTo/$heightFrom;
  29.       $rgResult['height'] = $heightTo;
  30.    }
  31.    return $rgResult;
  32. }
  33.  
  34. $rgSize=array('height'=>600, 'width'=>'800');
  35. $rgTo=array('height'=>1440, 'width'=>900);
  36.  
  37. //var_dump(refactorSize($rgSize, $rgTo));

Далее делаете изменение размера стандартными php-средствами (насколько я понял задачу, она не в том разделе, ну да может я ошибаюсь)


-----
Есть в мире две бесконечные вещи - это Вселенная и человеческая глупость. Но насчет первой .. я не уверен.
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 00:15:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Размер изображения будет изменяться так же и при изменении окна браузера.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function() {
  3.  
  4. /////////////////////////////////////////////////////////////////////////////////////////
  5. //  ВЫСТАВЛЯЕМ РАЗМЕРЫ КАРТИНОК В СООТВЕТСТВИИ С РАЗМЕРОМ ОКНА  /////////////////////////
  6. /////////////////////////////////////////////////////////////////////////////////////////        
  7.  
  8.         var windowW3, imgW = [], imgH = [], imgW2 = [], imgH2 = [], imgWNatur = [], imgHNatur = [];
  9.        
  10.         var win = $(window);
  11.         var doc = $(document);
  12.         var tabIndexPageImg = $('#tabIndexPageImg');
  13.        
  14.         var docW = doc.width(); // Ширина документа
  15.  
  16.         // Процент от размера окна (т.е. 100%)
  17.         var windowW2 = windowW/docW*100;
  18.             windowW2 = parseInt(windowW2, 10);
  19.                
  20.         // Процент от размера окна для старта ресайза
  21.         var windowW22 = windowW/windowW*100;
  22.             windowW22 = parseInt(windowW22, 10);
  23.      
  24.          
  25.           // ВЫСТАВЛЯЕМ РАЗМЕРЫ  ////////////////////////////////////////////////////////
  26.          
  27.           tabIndexPageImg.find('img').each(function(index, element) {
  28.  
  29.                   imgWNatur[index] = $(this).attr("width");   // Реальная ширина...
  30.                   imgHNatur[index] = $(this).attr("height");  // ... и высота изображения
  31.  
  32.                   imgW[index] = imgWNatur[index]*windowW2/100;
  33.                   imgW[index] = parseInt(imgW[index], 10);
  34.                  
  35.                   imgH[index] = imgHNatur[index]*windowW2/100;
  36.                   imgH[index] = parseInt(imgH[index], 10);
  37.            
  38.                   if(imgW[index] <= imgWNatur[index]){
  39.                         $(this).css({'width':imgW[index], 'height':imgH[index]}); // Картинка
  40.                   }else{
  41.                         $(this).css({'width':imgWNatur[index], 'height':imgHNatur[index]});      // Картинка
  42.                   }
  43.  
  44.           });
  45.          
  46.           //////////////////////////////////////////////////////////////////////////////////
  47.  
  48.          
  49. /////////////////////////////////////////////////////////////////////////////////////////
  50. //  РЕСАЙЗИМ РАЗМЕРЫ КАРТИНОК В СООТВЕТСТВИИ С РАЗМЕРОМ ОКНА  ///////////////////////////
  51. /////////////////////////////////////////////////////////////////////////////////////////        
  52.          
  53.  
  54.         win.resize(function(){
  55.                
  56.                 // Вычисляем процент от общего размера
  57.                 windowW2 = windowW3/docW*100;
  58.                 windowW2 = parseInt(windowW2, 10);
  59.                
  60.                 // Меняем размер, в зависимости от процента
  61.                 windowW3 = windowW3*windowW22/100;
  62.                 windowW3 = parseInt(windowW3, 10);
  63.                
  64.                
  65.                 //  САМ РЕСАЙЗ  ///////////////////////////////////////////////////////////////
  66.                
  67.                 tabIndexPageImg.find('img').each(function(index, element) {
  68.                        
  69.                         imgW2[index] = $(this).width();
  70.                         imgH2[index] = $(this).height();
  71.                        
  72.                         imgW2[index] = imgWNatur[index]*windowW2/100;
  73.                         imgW2[index] = parseInt(imgW2[index], 10);
  74.                        
  75.                         imgH2[index] = imgHNatur[index]*windowW2/100;
  76.                         imgH2[index] = parseInt(imgH2[index], 10);
  77.                        
  78.        
  79.                         if(imgW2[index] <= imgWNatur[index]){
  80.                     $(this).css({'width':imgW2[index], 'height':imgH2[index]}); // Картинка    
  81.                         }else{
  82.                         $(this).css({'width':imgW[index], 'height':imgH[index]}); // Картинка  
  83.                         }
  84.                        
  85.                                          
  86.         });
  87.                
  88.           //////////////////////////////////////////////////////////////////////////////
  89.  
  90.         });
  91.    
  92.        
  93. });
  94.  


Выставьте обязательно атрибуты width и height тега img у изображений:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <img src="" width="" height="" />
  3.  

(Отредактировано автором: 22 Декабря, 2011 - 00:22:03)

 
 Top
DeepVarvar Супермодератор
Отправлено: 22 Декабря, 2011 - 00:19:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Ребята - вы жжете Радость Радость Радость
CODE (html):
скопировать код в буфер обмена
  1. <img src="/img/image.jpg" width="100%" />
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 00:25:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
DeepVarvar пишет:
Ребята - вы жжете Радость Радость Радость
CODE (html):
скопировать код в буфер обмена
  1. <img src="/img/image.jpg" width="100%" />

Так изображение расплывается, если указавать %, потому и пришлось мне когда-то написать этот код.
 
 Top
DeepVarvar Супермодератор
Отправлено: 22 Декабря, 2011 - 00:27:10
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
В каком смысле расплывается? Становится несимметричным? Или вы про пикселизацию?
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 00:27:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Теряет чёткость.
 
 Top
DeepVarvar Супермодератор
Отправлено: 22 Декабря, 2011 - 00:30:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
А так нее?
А можно скрины для сравнения?
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 00:33:49
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
А так нет)
Если изображению задавать значение ширины в "px", то всё ровно, а если в "%" то плачевно.
 
 Top
DeepVarvar Супермодератор
Отправлено: 22 Декабря, 2011 - 00:38:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Ну ок. Всеравно не понимаю зачем такие полотна кода?
Там действий кот наплакал:
CODE (javascript):
скопировать код в буфер обмена
  1. $("#img").width(parseInt($(window).width(),10));
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 08:25:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
DeepVarvar пишет:
$("#img").width(parseInt($(window).width(),10));

Что это такое?
Вы задаёте ширину картинке равную окну браузера)
А надо вычислять % ресайза + % уменьшения от реальных размеров изображения, и т.д.
 
 Top
DeepVarvar Супермодератор
Отправлено: 22 Декабря, 2011 - 14:47:29
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Ну... Просто нет слов, ну вот с 5% по бокам...
CODE (javascript):
скопировать код в буфер обмена
  1. var ww = $(window).width(), pad = ww/100*10;
  2. $("#img").width(parseInt(ww-pad,10));

И т.д.....
 
 Top
armancho7777777 Супермодератор
Отправлено: 22 Декабря, 2011 - 22:40:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Можно вопрос...
Вы проверяли?)
 
 Top
tuareg
Отправлено: 22 Декабря, 2011 - 23:31:12
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
А тут что проверять? Вот код
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(window).on('resize',null,function(){
  3. var ww = $(window).width(), pad = ww/100*10;
  4. $("#img").width(parseInt(ww-pad,10));
  5. })
  6.  

И как бы все... Улыбка
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Декабря, 2011 - 10:23:49
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
tuareg пишет:
А тут что проверять? Вот код
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(window).on('resize',null,function(){
  3. var ww = $(window).width(), pad = ww/100*10;
  4. $("#img").width(parseInt(ww-pad,10));
  5. })
  6.  

И как бы все... Улыбка

А Вы проверьте. Как он работать будет.
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB