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
Форумы портала PHP.SU :: Версия для печати :: Уменьшение картинки в зависимости от разрешния
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Уменьшение картинки в зависимости от разрешния

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

1. CTAPu4OK - 11 Ноября, 2011 - 14:16:01 - перейти к сообщению
Имеется картинка 800x600, при разрешении в 1600x1280... если же разрешение экрана будет 1024х768 то картинка должна уменьшится на некий процент без смещений по дизайну =)

Требуется: Как вычислить этот процент в зависимости от разрешения браузера ?
2. EuGen - 11 Ноября, 2011 - 15:12:03 - перейти к сообщению
Имеется ввиду, что нужно вычислять новые измерения изображения, так, чтобы созранять пропорции и влезло в новое разрешение?
Тогда примерно так:
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-средствами (насколько я понял задачу, она не в том разделе, ну да может я ошибаюсь)
3. armancho7777777 - 22 Декабря, 2011 - 00:15:54 - перейти к сообщению
Размер изображения будет изменяться так же и при изменении окна браузера.
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.  
4. DeepVarvar - 22 Декабря, 2011 - 00:19:58 - перейти к сообщению
Ребята - вы жжете Радость Радость Радость
CODE (html):
скопировать код в буфер обмена
  1. <img src="/img/image.jpg" width="100%" />
5. armancho7777777 - 22 Декабря, 2011 - 00:25:36 - перейти к сообщению
DeepVarvar пишет:
Ребята - вы жжете Радость Радость Радость
CODE (html):
скопировать код в буфер обмена
  1. <img src="/img/image.jpg" width="100%" />

Так изображение расплывается, если указавать %, потому и пришлось мне когда-то написать этот код.
6. DeepVarvar - 22 Декабря, 2011 - 00:27:10 - перейти к сообщению
В каком смысле расплывается? Становится несимметричным? Или вы про пикселизацию?
7. armancho7777777 - 22 Декабря, 2011 - 00:27:54 - перейти к сообщению
Теряет чёткость.
8. DeepVarvar - 22 Декабря, 2011 - 00:30:41 - перейти к сообщению
А так нее?
А можно скрины для сравнения?
9. armancho7777777 - 22 Декабря, 2011 - 00:33:49 - перейти к сообщению
А так нет)
Если изображению задавать значение ширины в "px", то всё ровно, а если в "%" то плачевно.
10. DeepVarvar - 22 Декабря, 2011 - 00:38:57 - перейти к сообщению
Ну ок. Всеравно не понимаю зачем такие полотна кода?
Там действий кот наплакал:
CODE (javascript):
скопировать код в буфер обмена
  1. $("#img").width(parseInt($(window).width(),10));
11. armancho7777777 - 22 Декабря, 2011 - 08:25:31 - перейти к сообщению
DeepVarvar пишет:
$("#img").width(parseInt($(window).width(),10));

Что это такое?
Вы задаёте ширину картинке равную окну браузера)
А надо вычислять % ресайза + % уменьшения от реальных размеров изображения, и т.д.
12. DeepVarvar - 22 Декабря, 2011 - 14:47:29 - перейти к сообщению
Ну... Просто нет слов, ну вот с 5% по бокам...
CODE (javascript):
скопировать код в буфер обмена
  1. var ww = $(window).width(), pad = ww/100*10;
  2. $("#img").width(parseInt(ww-pad,10));

И т.д.....
13. armancho7777777 - 22 Декабря, 2011 - 22:40:32 - перейти к сообщению
Можно вопрос...
Вы проверяли?)
14. tuareg - 22 Декабря, 2011 - 23:31:12 - перейти к сообщению
А тут что проверять? Вот код
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.  

И как бы все... Улыбка
15. armancho7777777 - 23 Декабря, 2011 - 10:23:49 - перейти к сообщению
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.  

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

А Вы проверьте. Как он работать будет.

 

Powered by ExBB FM 1.0 RC1