Dans cet article, http://css-sortingcks.com/css-sprites/ , il est question de savoir comment supprimer une image plus petite d’une image plus grande. Pouvez-vous s’il vous plaît me dire si c’est possible / comment je peux rogner une image plus petite et ensuite redimensionner la région coupée avant que je ne la pose?
Voici un exemple tiré de cet article:
A { background-image: url(http://soffr.miximages.com/css/spriteme1.png); background-position: -10px -56px; }
Je voudrais savoir comment puis-je redimensionner cette image après l’avoir extraite de spriteme1.png
Voici l’URL de l’exemple: http://css-sortingcks.com/examples/CSS-Sprites/Example1After/
Je voudrais donc savoir si je peux réduire les icons à côté de Item1,2,3,4?
Vous pouvez utiliser la taille d’arrière-plan , telle qu’elle est supscope par la plupart des navigateurs (mais pas tous http://caniuse.com/#search=background-size )
background-size : 150% 150%;
Ou
Vous pouvez utiliser un combo de zoom pour webkit / ie et transformer: échelle pour Firefox (-moz-) et Opera (-o-) pour les ordinateurs de bureau et mobiles inter-navigateurs
[class^="icon-"]{ display: inline-block; background: url('../img/icons/icons.png') no-repeat; width: 64px; height: 51px; overflow: hidden; zoom:0.5; -moz-transform:scale(0.5); -moz-transform-origin: 0 0; } .icon-huge{ zoom:1; -moz-transform:scale(1); -moz-transform-origin: 0 0; } .icon-big{ zoom:0.60; -moz-transform:scale(0.60); -moz-transform-origin: 0 0; } .icon-small{ zoom:0.29; -moz-transform:scale(0.29); -moz-transform-origin: 0 0; }
Lorsque vous utilisez des images-objects, vous êtes limité aux dimensions de l’image dans l’image-object. La propriété CSS background-size
, mentionnée par Stephen, n’est pas encore largement prise en charge et pourrait causer des problèmes avec les navigateurs comme IE8 et les versions ultérieures – et, compte tenu de leur part de marché, cette option n’est pas viable.
Une autre façon de résoudre le problème consiste à utiliser deux éléments et à mettre à l’échelle le sprite en l’utilisant avec une balise img
, comme ceci:
De cette façon, l’élément externe ( div.sprite-image
) recadre une image 20x20px à partir de la balise img
, qui agit comme une background-image
mise à l’échelle.
Essayez ceci: Stretchy Sprites – Cross-browser, redimensionnement / étirement réactif des images sprites CSS
Cette méthode met à l’échelle les sprites de manière «réactive» afin que la largeur / hauteur s’ajuste en fonction de la taille de la fenêtre de votre navigateur. Il n’utilise pas la background-size
car la prise en charge de ce paramètre dans les navigateurs plus anciens est inexistante.
CSS
.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;} .stretchy .spacer {width: 100%; height: auto;} .stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;} .stretchy .sprite.s2 {left:-100%;} .stretchy .sprite.s3 {left:-200%;}
HTML
transform: scale();
fera que l’élément original conserve sa taille.
J’ai trouvé que la meilleure option était d’utiliser vw
. Cela fonctionne comme un charme:
https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/
#div1, #div2, #div3 { background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat; background-size: 50vw; border: 1px solid black; margin-bottom: 40px; } #div1 { background-position: 0 0; width: 12.5vw; height: 13vw; } #div2 { background-position: -13vw -4vw; width: 17.5vw; height: 9vw; transform: scale(1.8); } #div3 { background-position: -30.5vw 0; width: 19.5vw; height: 17vw; }
Voici ce que j’ai fait pour le faire. Gardez à l’esprit que cela ne fonctionnera pas sur IE8 et ci-dessous.
#element { width:100%; height:50px; background:url(/path/to/image.png); background-position:140.112201963534% 973.333333333333%; }
La largeur de l’image d’arrière-plan diminue à mesure que le parent de #element
diminue. Vous pouvez faire la même chose avec sa hauteur si vous convertissez la height
en pourcentage. Le seul point délicat consiste à déterminer les pourcentages pour la background-position
de background-position
.
Le premier pourcentage correspond à la largeur de la zone ciblée de l’image-object lorsque la largeur normale est divisée par la largeur totale de l’image-object et multipliée par 100.
Le deuxième pourcentage est la hauteur de la zone ciblée de l’image-object avant d’être redimensionné par la hauteur totale de l’image-object et multiplié par 100.
Le libellé de ces deux équations est un peu flou, alors faites-moi savoir si vous avez besoin de moi pour mieux l’expliquer.
essayez d’utiliser la taille d’arrière-plan: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Y a-t-il quelque chose qui vous empêche de rendre les images à la taille que vous souhaitez en premier lieu?
Ancien message, mais voici ce que j’ai fait en utilisant la background-size:cover;
(Astuce pour @Ceylan Pamir) …
EXEMPLE D’UTILISATION
Flipper horizontal (survolez l’image du recto, retournez à l’image avec une image différente).
EXEMPLE SPRITE
480px x 240px
EXEMPLE DE DIMENSION FINALE
Image unique @ 120px x 120px
CODE GÉNÉRIQUE
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}
.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}
ABEVIATED CASE FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/
Il m’a fallu du temps pour trouver une solution à ce problème et j’étais satisfait de:
Problème:
Un sprite d’icons SVG – disons 80px x 3200px
Nous souhaitons en dimensionner chaque utilisation dans les sélecteurs de contenu (: avant /: après) à différents endroits sur différentes tailles sans redéfinir les coordonnées de chaque image-object en fonction de la taille utilisée.
Donc, cette solution vous permet d’utiliser les mêmes coordonnées de sprite dans un que dans un
tout en le
.
[data-command]::before { content: ''; position: absolute; background-image: url("images/sprite.svgz"); background-repeat: no-repeat; background-size: cover; } button[data-command]::before { width: 32px; height: 32px; } menuitem[data-command]::before { width: 24px; height: 24px; } [data-command="cancel"]::before { background-position: 0% 35%; } [data-command="logoff"]::before { background-position: 0% 37.5%; }
En utilisant des pourcentages (à 2 décimales) en arrière-plan plutôt qu’en taille d’arrière-plan, comme suggéré par d’autres utilisateurs ici, vous pouvez redimensionner la même déclaration d’icône à n’importe quelle taille sans devoir la redéclarer.
Le pourcentage de la position-y est la hauteur / hauteur d’origine de l’image-object en% – dans notre cas, 80px * 100 / 3200px == chaque image-object est représentée par une position y de 2,5%.
Si vous avez des états de survol / survol, vous pouvez doubler la largeur de l’image-object et spécifier la coordonnée position-x.
L’inconvénient de cette approche est que l’ajout de nouvelles icons à une date ultérieure modifiera la hauteur de l’image-object et sa position en%, mais si vous ne le faites pas, vos coordonnées devront être modifiées pour chaque résolution.
Eh bien, je pense avoir trouvé une solution plus simple pour le redimensionnement des images: exemple – disons qu’il ya une image avec 3 sprites de taille égale que vous souhaitez utiliser, utilisez CSS pour redimensionner l’image
background-size : 300% 100%;
puis spécifiez la hauteur et la largeur personnalisées à appliquer à votre élément HTML, par exemple:
width :45%; height:100px;
Un exemple de code ressemblerait à ceci:
.customclass { background: url("/sample/whatever.png") 0 0 no-repeat ; background-size : 300% 100%; width :45%; height:100px; }
Je suis un peu nouveau pour CSS, et le style n’est pas mon meilleur domaine, cela pourrait être une mauvaise façon de le faire .. mais cela a fonctionné pour moi dans Firefox / Chrome / Explorer 10, en espérant que cela fonctionnera aussi dans les anciennes versions.
Définissez la largeur et la hauteur à l’élément wrapper de l’image de l’image-object. Utilisez ce css.
{ background-size: cover; }
Utiliser transform: scale(...);
et ajoutez la margin: -...px
correspondante margin: -...px
pour compenser l’espace libre de la mise à l’échelle. (vous pouvez utiliser * {outline: 1px solid}
pour voir les limites des éléments).
2018 réponse
Je réponds à une question similaire ici: https://stackoverflow.com/a/49967010/1919821
Facile … Utiliser deux copies de la même image avec une échelle différente sur la feuille du sprite. Définissez les coordonnées et la taille sur la logique de l’application.