Отзывчивые спрайты/проценты

Ответ 1

Размер div не воспроизводится в исчислении, только размеры фона и часть, которую вы собираетесь использовать.

Предположим, что ваш фон имеет ширину 1000 пикселей и высоту 500 пикселей.

Изображение, которое вы собираетесь использовать, имеет ширину и высоту 80 пикселей.

background-size:

x part     1000px / 80px = 12.5   ->> 1250%
y part      500px / 80px = 6.25   ->>  625%

background-size: 1250% 625%;

фон положение:

x-part     173px / 1000px = 0.173   ->> 17.3%
y part     293px / 500px = 0.586    ->> 58.6%

background-position: 17.3% 58.6%;

Ответ 2

Обновление для ответа @vals. Некоторые из его вычислений не совсем сработали для меня.

Исходные размеры фона работали, за исключением того, что он умножался на 1000 вместо 100, чтобы получить окончательные процентные показатели. Так что 12500% должно составлять 1250% и так далее. (Обновление: 10/2015 - похоже, что @vals исправил это в своем ответе.)

Значения значений X-фона для фона были для меня очень незначительными. Они не соответствовали тому, что было создано spritecow.com(согласно предложению Адриана Флореску). Это, я думаю, потому, что абсолютные координаты вычисляются слева от фонового изображения, тогда как с процентами вы должны вычислять справа от фонового изображения. В этом случае вы должны вычесть ширину изображения из общей ширины фона, прежде чем делиться с ним абсолютным номером x-pos.

Итак, вместо:

x-part 173px / 1000px = 0.173 ->> 17.3%

сделайте следующее:

x-part 173px / (1000px - 80px) = 0.1880434783 ->> 18.80434783%

Где:

1000px - это ширина фонового изображения (спрайт)

80px - это ширина отображаемого изображения

173px - абсолютная координата x отображаемого изображения.

Это то, что работает для меня, во всяком случае!

Ответ 3

Я написал Отзывчивый генератор Sprite CSS, чтобы позаботиться обо всей работе за вас. Вы можете просто загрузить кучу изображений, и это даст вам изображение спрайта и CSS для него.

В нем используется новый метод для реагирования спрайтов - данные src с прозрачным PNG, чтобы изображение сохраняло его соотношение сторон, поэтому в отличие от других методов изображения не обязательно должны быть квадратными или одинаковыми.

Ответ 4

Это лучший отзывчивый пример, который я нашел, чтобы решить проблему спрайта !

Кросс-браузер, адаптивное изменение размера/растяжения изображений спрайтов CSS

Этот метод не зависит от размера фона, поэтому он будет работать в старых браузерах.

Эластичные спрайты

• В этом примере используется изображение шириной 800 x 160. Это изображение содержит 6 спрайтов одинакового размера (160x160 каждый).

• Если ваш размер спрайта отличается, все, что вам нужно изменить, это свойство max-width.sprite, чтобы соответствовать индивидуальной ширине спрайта.

• Чтобы установить видимый спрайт: Установите для левого значения .sprite значение: 0 = 1-й спрайт -100% = 2-й спрайт -200% = 3-й спрайт и т.д.

• Если вы хотите, чтобы изображения растягивались больше их естественного размера: добавьте класс .no-limit к .stretchy. Это удаляет max-width: 160px из .stretchy и добавляет min-height: 100% к .sprite. В качестве альтернативы вы можете установить большую max-width, используя значение px, например, 300px.

• Распорка изображения может быть любого размера, если она пропорциональна размерам отдельных спрайтов.

Ответ 5

Это более простое решение, проверьте это

.my_picture{
    //target your sprite
    background: url(my_img.jpg) no-repeat;

    //Specify it full image
    backgound-size: 100%;

    //Position of the targeted picture
    background-position: left 0 bottom x%;

    //Zoom in or out on the position
    width: x%;

    //Scale height by playing with padding
    padding-bottom: x%;

    //Set height to 0 because of sprite size
    height: 0;
}

Как это работает? Чтобы легко ориентировать любые спрайты, мы должны указать размер спрайта в оригинале "100%". Затем мы будем нацеливать позицию изображения из соответствующего дна, с левым 0.

Поскольку размер спрайта равен 100%, мы должны отключить высоту и единственный вариант установить высоту сейчас - это играть с дополнением вниз, в процентах.

Ваше изображение теперь полностью реагирует, просто играйте с значениями ширины (в процентах), чтобы увеличить или уменьшить масштаб, и все, у вас есть полностью отзывчивый css-спрайт.

Оригинальная статья в моем блоге: http://creativcoders.wordpress.com/2014/05/05/css-responsive-sprites/

Ответ 6

Вы можете использовать веб-сайты, чтобы узнать точные координаты вашего спрайта. Я лично использую http://www.spritecow.com/

Ответ 7

Я потратил много времени на поиск ответа на этот вопрос, я вышел с этим решением, он работает для меня, по крайней мере, на данный момент, основан на фиксированных размерах пикселей и горизонтальных спрайтах, будет беспорядок с процентом в любом случае, потому что вам придется делать математику для значений пикселей для этого процента и для случайных расположенных спрайтов, потому что вам нужно будет найти случайное расположение спрайта внутри изображения, слишком много математики для простой задачи, на которую я верю.

Вам нужно:

• Знайте ширину изображения (compass image-width($image))
• Исходный размер пикселя и расположение спрайта внутри изображения (Photoshop делает трюк)
• Размер ячейки, пропорциональной соответствующему спрайту, предназначенному для показа
• И, конечно, количество растяжек, которое вы хотите применить к конкретному спрайту.

Как совет, вам нужно оставить по крайней мере 1px физического поля между каждым изображением, потому что проценты производят не целочисленные пиксели, и вы получите в результате перекрывающиеся спрайты!!;)

Проверьте это и сообщите мне:

//functions

//stretch by percentage
@function stretchImage($width, $height, $percentage) {

    $s_width: round( ($width * $percentage) / 100 );
    $s_height: round( ($height * $percentage) / 100 );

    @return ($s_width, $s_height);
}

//strip units
//(Eric M Suzanne) http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

//replace in string
//(css tricks) http://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

//get unitless percentage
@function getPercentageFrom($valueA, $valueB) {

    $percentage: percentage(strip-units($valueA)/strip-units($valueB));

    @return ($percentage);
}


//now the magic

//we know the witdh of the image containing the sprites 
$image: url(http://www.cssguy4hire.com/codePenAssets/sprite_test.png);
$image_width: 965px;

//the amount of strech we want to aply
$stretchTo: 175;

//we know the current sprite measures we  going to set 
$sprite_width: 150px;
$sprite_height: 150px;
//left is 0 cuz is first sprite                
$sprite_left: 0%;                

//stretch sprite                            
$stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
$width: nth($stretch, 1);                
$height: nth($stretch, 2);                

//set background size and position          
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);

//default position 0
$bkg_left: $sprite_left;              


//compose the css
#image {
    margin: auto;
    width: $width;
    height: $height;
    position: relative;
    display: block;
    background: #00f00f $image $bkg_left 0 no-repeat;
    background-size: $bkg-size;
    border: 5px solid #cccccc;

    //we chage the sprite
    &.sprite_1 {

        //the amount of strech we want to aply
        $stretchTo: 250;

        //we know the current sprite measures we  going to set 
        //0 is te first sprite starting left to right
        $sprite_width: 250px;
        $sprite_height: 75px;
        $sprite_left: 150px;              

        //stretch sprite                            
        $stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
        $width: nth($stretch, 1);                
        $height: nth($stretch, 2);                

        //set background size        
        $bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
        $bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );

        //compose the css
        width: $width;
        height: $height;
        background-size: $bkg-size;
        background-position: $bkg_left 0;

    }

    &.sprite_2 {

        //the amount of strech we want to aply
        $stretchTo: 80;

        //we know the current sprite measures we going to set 
        $sprite_width: 140px;
        $sprite_height: 120px;
        $sprite_left: 400px;              

        //stretch sprite                            
        $stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
        $width: nth($stretch, 1);                
        $height: nth($stretch, 2);                

        //set background size        
        $bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
        $bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );

        //compose the css
        width: $width;
        height: $height;
        background-size: $bkg-size;
        background-position: $bkg_left 0;

    }

    &.sprite_3 {

        //the amount of strech we want to aply
        $stretchTo: 125;

        //we know the current sprite measures we going to set 
        $sprite_width: 290px;
        $sprite_height: 134px;
        $sprite_left: 540px;              

        //stretch sprite                            
        $stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
        $width: nth($stretch, 1);                
        $height: nth($stretch, 2);                

        //set background size        
        $bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
        $bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );

        //compose the css
        width: $width;
        height: $height;
        background-size: $bkg-size;
        background-position: $bkg_left 0;

    }

    &.sprite_4 {

        //the amount of strech we want to aply
        $stretchTo: 153;

        //we know the current sprite measures we going to set 
        $sprite_width: 135px;
        $sprite_height: 56px;
        $sprite_left: 830px;              

        //stretch sprite                            
        $stretch: stretchImage($sprite_width, $sprite_height, $stretchTo);
        $width: nth($stretch, 1);                
        $height: nth($stretch, 2);                

        //set background size        
        $bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
        $bkg_left: percentage($sprite_left / ($image_width - $sprite_width) );

        //compose the css
        width: $width;
        height: $height;
        background-size: $bkg-size;
        background-position: $bkg_left 0;

    }

}

http://codepen.io/wolfitoXtreme/pen/BymKyP

Ответ 8

Мой подход похож на Грега на то, что я написал инструмент для создания отзывчивых спрайтов css. Я, однако, сделал это еще на один шаг и добавил алгоритм сортировки, чтобы вы могли эффективно упаковать изображения на png.

Вот отзывчивый инструмент генерации Sprite CSS: https://responsive-css.us/

Ответ 9

Из большого опыта FE я разработал платформу адаптивных спрайтов, которая не полагается на background-image, но вместо этого использует "физическое" изображение в контейнере, который масштабируется как оригинальное изображение/часть спрайтов. Проблема с css bgd-img заключается в расчете размера и положения, и часто css "пропускает" возможность изображения на несколько пикселей. Большинство браузеров отображает эти значения в 0.1px, но также округляет их. Таким образом, точность составляет (около 1/2 пикселей). Это несоответствие умножается, когда вы пытаетесь масштабировать его (чтобы сделать его отзывчивым). - так что не обманывайте себя "отзывчивыми спрайтами", которые полагаются на фоновое изображение css. Это просто плохое и смещенное отображение нужного вам изображения спрайтов. - JavaScript (framework) гораздо более точен - (1/100px), и его прочная основа для адаптивных изображений - так как у вас есть размер 1/50 для масштабирования фото и без потери пикселя. Я не рекламирую это, если кому-то интересно - взгляните на: respive-sprites.com