Comment puis-je mettre à l’échelle une image dans un sprite CSS

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:

     
    icon

    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

       icon    icon    icon  

    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.