Бутстрап с таким не справляется, так как он растягивает очень маленькую картинку на всю ширину контейнера. С большими картинками конечно справляется.
Так что нечего экспериментировать, просто это работа для Jquery:
- // Now we need to use only maximum image size
- function doImageResizingWork(parentSelector, imageSelector){ // ‘.image’, ‘p img’
- var destElem = $(parentSelector);
- $(parentSelector + ‘ ‘+ imageSelector).each(function () {
- var img = $(this);
- // get actual img size
- var img_copy = new Image();
- img_copy.onload = function () {
- // now we working inside this callback
- var realW = this.width;
- var realH = this.height;
- var destW = destElem.width() – 7;
- // only if image bigger parent
- if (realW > destW)
- {
- var scaleRatio = realW / realH;
- var newH = destW / scaleRatio;
- } else
- {
- var destW = realW;
- var newH = realH;
- }
- img.attr(‘width’, destW);
- img.attr(‘height’, newH);
- };
- img_copy.src = img.attr(‘src’);
- });
- }
- function doSomething() {
- doImageResizingWork(‘#rotating_items’,‘img’);
- doImageResizingWork(‘.image’,‘img’);
- }
- $(function () {
- doImageResizingWork(‘.image’,‘img’);
- doImageResizingWork(‘#rotating_items’,‘img’);
- var resizeTimer;
- $(window).resize(function () {
- clearTimeout(resizeTimer);
- resizeTimer = setTimeout(doSomething, 500);
- });
- });