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

Я прочитал каждый вопрос о отзывчивых спрайтах с помощью css, я увидел jsfiddle с рабочими примерами реагирующих спрайтов, но я до сих пор не могу понять, как получить процент фоновой позиции и размера фона, как использовать (некоторые говорят, что это необходимо) вокруг div, который использует фоновое изображение и почему его использовать...
Например, если у меня есть div, который имеет ширину: 20% (скажем, 40 пикселей) и представляет собой круг. Изображение, которое мне нужно использовать в качестве фонового изображения, имеет ширину 80 пикселей (круг, и мне нужно изменить его размер в соответствии с моим div) и является одним из 40 изображений, которые у меня есть на моем листе спрайтов. Он находится на позиции -173px -293px.
Я действительно не знаю, как заставить его работать.
Я пробовал:

div {
  width:20%;
  border-radius:50%;
  background: url('images/sprites.png') no-repeat 72.083% 67.981%;
  background-size: 50%;
  }

Конечно, это не сработало. Я не понимаю, как получить background-position-x, background-position-y (числа, которые у меня есть, из "автоматического" размера спрайт-листа), когда размер фона не авто, или как размер фона относится к проценту размера div.
Есть ли какая-нибудь математическая формула, которую я могу использовать? Может ли кто-нибудь объяснить мне или дать мне название какого-нибудь веб-сайта/книги, где я могу это узнать?
Спасибо,

22
задан user3097405 16 февр. '14 в 14:02
источник поделиться
8 ответов

Размер 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%;
16
ответ дан vals 16 февр. '14 в 21:08
источник поделиться

Обновление для ответа @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 отображаемого изображения.

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

26
ответ дан ChillyPenguin 02 мая '14 в 4:30
источник поделиться

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

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

11
ответ дан Greg 01 апр. '15 в 11:57
источник поделиться

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

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

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

Stretchy Sprites

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

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

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

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

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

3
ответ дан Andres Separ 20 окт. '14 в 17:16
источник поделиться

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

.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/

2
ответ дан Edouard Kombo 05 мая '14 в 19:31
источник поделиться

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

2
ответ дан Ankur Aggarwal 16 февр. '14 в 14:09
источник поделиться

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

Вам нужно:

  • Знайте ширину изображения (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

0
ответ дан wolfitoXtreme 07 февр. '15 в 0:31
источник поделиться

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

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

0
ответ дан eivers88 30 авг. '16 в 8:49
источник поделиться

Другие вопросы по меткам