Особистий блог Blohher'a

Читай Blohher брат

Реклама Google
Популярність сайта і якісний пошук

bootstrap автоматическое подстаивание картинки

Бутстрап с таким не справляется, так как он растягивает очень маленькую картинку на всю ширину контейнера. С большими картинками конечно справляется.

Так что нечего экспериментировать, просто это работа для Jquery:

  1. // Now we need to use only maximum image size  
  2. function doImageResizingWork(parentSelector, imageSelector){ // '.image', 'p img'  
  3.     var destElem = $(parentSelector);  
  4.     $(parentSelector + ' '+ imageSelector).each(function () {  
  5.         var img = $(this);  
  6.         // get actual img size  
  7.         var img_copy = new Image();  
  8.         img_copy.onload = function () {  
  9.             // now we working inside this callback  
  10.             var realW = this.width;  
  11.             var realH = this.height;  
  12.             var destW = destElem.width() - 7;  
  13.             // only if image bigger parent  
  14.             if (realW > destW)  
  15.             {  
  16.                 var scaleRatio = realW / realH;  
  17.                 var newH = destW / scaleRatio;  
  18.             } else  
  19.             {  
  20.                 var destW = realW;  
  21.                 var newH = realH;  
  22.             }  
  23.             img.attr('width', destW);  
  24.             img.attr('height', newH);  
  25.         };  
  26.         img_copy.src = img.attr('src');  
  27.     });  
  28. }  
  29. function doSomething() {  
  30.     doImageResizingWork('#rotating_items','img');  
  31.     doImageResizingWork('.image','img');  
  32. }  
  33. $(function () {  
  34.     doImageResizingWork('.image','img');  
  35.     doImageResizingWork('#rotating_items','img');  
  36.     var resizeTimer;  
  37.     $(window).resize(function () {  
  38.         clearTimeout(resizeTimer);  
  39.         resizeTimer = setTimeout(doSomething, 500);  
  40.     });  
  41. }); 

 

 

Залишити коментар

Нік
 
E-mail
 
Сайт
 
Текст
 

 
Blohher - Блог розробника сайтів