2016-01-14 2 views
0

У меня есть div (предположим, ширина 30px и высота 30px), и я использую изображение спрайта для всех изображений, теперь есть одно изображение в спрайте на background-position : -12px -1467px (просто пример) , ширина которого и высота - 70 пикселей, и я хочу применить это изображение в качестве фона для данного div.Масштабировать изображение в спрайте

Проблема заключается в том, как масштабировать это изображение в соответствии с размером div.

Это не должно прерываться, если я увеличиваю или уменьшаю размер div на основе разрешения.

Ширина и высота моего спрайта могут быть изменены (больше изображений можно добавить позже в спрайте).

Этот вопрос может быть дубликат, поскольку мало кто предложил, но я не могу правильно понять этот вопрос. Для этого я создал fiddle.

В скрипичной 2 div показывает оригинальный спрайт, и в первом div я хочу показать только первое изображение, но когда я изменить размер DIV первое изображение должно изменить размер с DIV (например, если я использую индивидуальный образ вместо спрайт).

Один из способов сделать это первым div, равным первому изображению, а затем при изменении размера использовать что-то вроде transform:scale(.5), но я не хочу его использовать.

+0

Возможный дубликат http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css -sprite – Tricky12

+0

вам нужен размер фона и сбросьте исходное положение в соответствии с этим новым размером :) пример: http://codepen.io/gc-nomade/pen/Hezro –

+0

на самом деле это ручка http://codepen.io/gc -nomade/pen/Hezro относятся к этому ответу: http://stackoverflow.com/questions/20310994/using-sprites-within-a-div-of-100/20311537 может быть дубликатом, а также –

ответ

0

Набор background-size к тому, что % вам нужно заполнить Div