Класс img-responsive (bootstrap) режет спрайт

.img-responsive режет спрайт:

texttexttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttexttexttex ttexttexttexttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttexttexttexttex ttexttexttexttexttexttexttexttexttexttexttexttex ttexttexttexttexttexttext

.photo { display: inline-block; vertical-align: top; max-width: 160px; width: 100%; height: auto; margin: 0px 17px 20px 0; } .photo__item_4{ background: #fff url("../images/img-sprite-sb432b0f395.png") 0px -2455px no-repeat; display: block; max-width: 100%; height: auto; height: 104px; position: relative; }

Ответ

.img-responsive здесь лучше не использовать - этот бутстраповский класс не сочетается с css-спрайтами. Потому что он влияет непосредственно на изображение, а здесь нужно повлиять и на его родителя (у вас это .photo).
Верстка будет такая:

Обратите внимание на photo_4 и photo_item_4 - эти классы нужны для стилизации отдельного изображения спрайта.
Для тестов я взял вот этот спрайт, рабочий пример доступен здесь: https://jsfiddle.net/gambala/72Let9a4/
.photo мы подстраиваем под всю ширину контейнера:
.photo { width: 100%; }
При этом .photo_4 мы ограничиваем по ширине:
.photo_4 { max-width: 112px; }
Где 112px - это ширина отдельного изображения в спрайте. Обратите внимание - значение в пикселях.
Далее - стили самого изображения:
.photo__item { background-repeat: no-repeat; padding-bottom: 100%; width: 100%; }
width: 100% растягивает изображение по родителю, то есть по .photo. Но, так как у .photo стоит ограничение в 112px - изображение перестанет растягиваться на этой отметке.
padding-bottom: 100%; - важный атрибут. У нашего изображения высота равна нулю, но есть нижний паддинг, равный ширине контейнера .photo. В итоге фактическая высота нашего изображения будет равна его ширине, в том числе - и в случае с 112px. Получаем резиновый квадрат. В него мы и будем ставить фоном спрайт.
Если ваше изображение в спрайте не квадратное - тогда padding-bottom у вас будет отличаться. Например, если изображение размером 112px*83px, тогда padding-bottom будет равен 83px / 112px = 0.7410 = 74.10%
Когда ставим изображение фоном - все размеры мы указываем в процентах
.photo__item_4 { background: #fff url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png"); background-position: 0 38.88%; background-size: 535.71% 357.14%; }
Формулы расчета:
Размер по ширине - 600px / 112px = 5.3571 = 535.71% Размер по высоте - 400px / 112px = 3.5714 = 357.14% Отступ по икс - 0px / ( 600px - 112px ) = 0 Отступ по игрек - 112px / ( 400px - 112px ) = 0.3888 = 38.88%
Где:
600px - ширина спрайта 400px - высота спрайта 112px в размере, а также внутри скобок в отступе - ширина и высота изображения в спрайте 0px и 112px за скобками в отступах - отступ изображения в спрайте по икс и игрек
Рабочий пример: https://jsfiddle.net/gambala/72Let9a4/