sensible sprites / pourcentages

La div dimension ne joue pas dans le calcul, seul le fond de tailles, et la partie que vous allez utiliser.

Permet de dire que votre arrière-plan, a une largeur de 1000px et d'une hauteur de 500px.

L'image que vous allez utiliser a 80px de largeur et de hauteur.

background-size:

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

background-size: 1250% 625%;

background-position:

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

background-position: 17.3% 58.6%;

J'ai écrit un Responsive CSS Sprite Generator de prendre soin de tout le travail pour vous. Vous pouvez simplement télécharger un tas d'images et il vous donnera une image sprite et le CSS pour ça.

Il utilise une nouvelle méthode pour faire les sprites réactifs de données src d'une image PNG transparente afin de rendre l'image de maintenir son ratio d'aspect, donc, contrairement à d'autres méthodes que les images n'ont pas besoin d'être carré, ou tous le même rapport.

C'est une solution plus simple, cochez cette

.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;
}

Comment ça fonctionne?
Pour cibler n'importe quel sprite facilement les images, nous devons préciser la taille des sprites à l'origine, “100%”. Nous aurons alors la cible d'une position de l'image du bas, à gauche, avec 0.

Parce que la taille des sprites est réglée au maximum de 100%, nous avons pour désactiver la hauteur, et la seule option pour régler la hauteur maintenant, c'est de jouer avec un rembourrage-bas, en pourcentage trop.

Votre image est maintenant totalement responsive, il suffit de jouer avec les valeurs de largeur (en pourcentage), pour effectuer un zoom avant ou arrière, et c'est tout, vous avez entièrement sensibles sprite css.

Article Original sur mon blog ici: http://creativcoders.wordpress.com/2014/05/05/css-responsive-sprites/

J'ai passé beaucoup de temps à chercher une réponse à cette question, je suis venu avec cette solution, ça marche pour moi, au moins pour l'instant, est basé sur pixel fixe box-sizing, et horizontale des sprites, sera un gâchis avec un pourcentage de toute façon parce que vous aurez à faire le calcul pour les valeurs des pixels de ce pourcentage, et pour aléatoire situé sprites parce que vous aurez à trouver le aléatoire emplacement de l'image-objet à l'intérieur de l'image, trop de calcul pour une tâche simple je crois.

Vous avez besoin:

• Savoir la largeur de l'image (compass image-width($image))
• L'original de la taille de pixel et l'emplacement de l'image-objet à l'intérieur de l'image (Photoshop fait le truc)
• La taille de la boîte contenant proportionnelle à la correspondante de sprite sont destinés à montrer
• Et bien sûr, la quantité d'étirement que vous souhaitez appliquer à la les sprites.

Comme un morceau de conseils, vous devez laisser au moins 1px de physique de la marge entre chaque image, parce que les pourcentages ne donnent pas d'entier de pixels, et vous allez vous retrouver avec la superposition de sprites!! 😉

Vérifier et me donner quelques commentaires s'il vous plaît:

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

À partir d'une grande FE expérience, j'ai développé sensible sprites cadre qui ne dépend pas de background-image, mais au lieu de cela, il utilise des "physique" de l'image dans un conteneur qui est mis à l'échelle comme image d'origine/partie de sprites.
Le problème avec css bgd-img est le calcul de la taille et de la position et de ses souvent pour les css "miss" les photos possition pour quelques pixels.
La plupart des navigateurs rend ces valeurs à 0,1 px, mais des tours de il ainsi. De sorte que la précision de l'est (environ 1/2 de la px).
Ce missmatch se multiplie quand vous essayez de mettre à l'échelle (à adapter). - afin de ne pas se laisser berner par le "responsive sprites" qui s'appuient sur les css background-image. Ils sont juste un mauvais et déplacées à l'affichage de sprites image dont vous avez besoin.
- Le JavaScript (framework) est beaucoup plus precisious - (1/100px), et son terrain solide réactif images - comme vous l'avez 1/50 taille à l'échelle de photos et de ne pas perdre tout pixel.
Je ne suis pas de la publicité, Si quelqu'un est intéressé, prendre un coup d'oeil à: responsive-sprites.com