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. });
1 Star2 Stars3 Stars4 Stars5 Stars (Еще нет оценки, будьте первым)
Loading...
стрілка

Понравилась статья? Подпишись на обновления блога, и получай самую свежую информацию на свой e-mail!

Свежая информация в сфере SEO:

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *