Puis-je changer la hauteur d'une image en CSS: avant /: après les pseudo-éléments?


251

Supposons que je veuille décorer des liens vers certains types de fichiers à l'aide d'une image. Je pourrais déclarer mes liens comme

<a href='foo.pdf' class='pdflink'>A File!</a>

puis CSS comme

.pdflink:after { content: url('/images/pdf.png') }

Maintenant, cela fonctionne très bien, sauf si ce pdf.pngn'est pas la bonne taille pour mon texte de lien.

J'aimerais pouvoir dire au navigateur de redimensionner l' :afterimage, mais je ne peux pas pour la vie de moi trouver la bonne syntaxe. Ou est-ce comme des images d'arrière-plan, où le redimensionnement n'est tout simplement pas possible?

ETA: Je penche pour a) redimensionner l'image source pour qu'elle soit de la "bonne" taille, côté serveur et / ou b) changer le balisage pour fournir simplement une balise IMG en ligne. J'essayais d'éviter ces deux choses, mais elles semblent être plus compatibles que d'essayer de faire des choses uniquement avec CSS. La réponse à ma question initiale semble être "vous pouvez en quelque sorte le faire, parfois".


1
Y a-t-il une raison impérieuse pour laquelle vous n'utilisez pas de balises 'img' avec des balises 'a' enroulées autour d'elles? C'est la syntaxe la plus typique pour une image qui est également un lien. Je dis cela parce que même si vous faites fonctionner votre méthode, vous risquez de confondre d'autres développeurs. CSS a également une solide réputation d'inconstance entre les navigateurs / versions.
Servy

4
J'apprécie le problème, c'est juste que je ne contrôle pas nécessairement la génération de balisage - dans ce cas, je ne peux que remodeler, pas restructurer.
Coderer

Longue discussion sur la liste de diffusion du W3C: lists.w3.org/Archives/Public/www-style/2011Nov/…
user123444555621

Réponses:


375

Le réglage du background-sizeest autorisé. Cependant, vous devez toujours spécifier la largeur et la hauteur du bloc.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Voir le tableau de compatibilité complet sur le MDN .


3
C'est génial, sauf que la plupart de nos clients sont sur IE 7 ou 8 (non-sens d'entreprise, désolé).
Coderer

14
Si c'est le cas, vous ne devriez pas utiliser :afterdu tout. Il n'est pas pris en charge sous IE8.
Ansel Santosa

24
Cette technique nécessitait également un réglage width: 10px; height: 20px;pour voir l'image.
ici le

5
A noter également que cela fonctionne bien, mais uniquement avec la background-imagepropriété spécifique , le simple backgroundne fonctionnera pas.
Gruber

4
(Pour :before) j'avais aussi besoin position: absolute, et left: -10px.
Hugo

95

Notez que le :afterpseudo-élément est une boîte, qui à son tour contient l'image générée. Il n'y a aucun moyen de styliser l'image, mais vous pouvez styliser la boîte.

Ce qui suit n'est qu'une idée, et la solution ci - dessus est plus pratique.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Inconvénients: vous devez connaître les dimensions intrinsèques de l'image, et cela vous laisse un espace, dont je ne peux pas me débarrasser de l'ATM.


6
zoom: 0,5 vaut également la peine d'être considéré.
Alex

J'aime l'idée de cette solution, mais elle annule le positionnement, en particulier dans un scénario de bloc en ligne. (IE 11)
Christopher Davies

1
le zoom n'est pas bien pris en charge.

1
le jsfiddle ne change pas la taille. J'utilise la dernière version de Firefox. J'ai également essayé le dernier exemple jsfiddle dans ce post en utilisant le zoom, et cela ne fonctionne pas non plus.
Ryan

1
Juste une note: dans mon cas, j'ai dû mettre position: absolutede l'ordre pour arriver transform: scale(0.5)à travailler réellement. J'ai également dû mettre position: relativel'élément "parent" (le propriétaire du :afterpseudo) pour raison. De plus, j'ai dû ajouter translate(-16px, -16px)à ma transformation pour positionner correctement l'icône 16x16. Le a position: absoluteégalement l'avantage d'éliminer le problème des espaces blancs.
Braden Best

34

Puisque mon autre réponse n'était évidemment pas bien comprise, voici une deuxième tentative:

Il existe deux approches pour répondre à la question.

Pratique (montrez-moi juste la putain de photo!)

Oubliez le :afterpseudo-sélecteur, et optez pour quelque chose comme

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Théorique

La question est: pouvez-vous styliser le contenu généré ? La réponse est: non, vous ne pouvez pas. Il y a eu une longue discussion sur la liste de diffusion du W3C sur ce problème, mais aucune solution jusqu'à présent.

Le contenu généré est rendu dans une zone générée et vous pouvez styliser cette zone, mais pas le contenu en tant que tel . Différents navigateurs montrent un comportement très différent

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome redimensionne le premier, mais utilise les dimensions intrinsèques de l'image pour le second

firefox et ie ne supportent pas le premier, et utilisent des dimensions intrinsèques pour le second

l'opéra utilise des dimensions intrinsèques dans les deux cas

(depuis http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

De même, les navigateurs affichent des résultats très différents sur des choses comme http://jsfiddle.net/Nwupm/1/ , où plus d'un élément est généré. Gardez à l'esprit que CSS3 est encore au stade de développement précoce, et ce problème n'a pas encore été résolu.


1
@TJ Chaque réponse distincte mérite une réponse (si ce n'est pas assez évident), qui obtiendra différentes quantités de votes positifs et sera vue / citée / partagée différemment en fonction du contenu de la réponse.
Timo Huovinen

13

Vous devez utiliser l'arrière-plan au lieu de l'image.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

6

diplay: block; n'a aucun effet

positionin fonctionne également de manière très étrange en fonction des principes fondamentaux du frontend, alors soyez prudent

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

4

Voici une autre solution (qui fonctionne): redimensionnez simplement vos images à la taille souhaitée :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

vous avez besoin de pdf.png pour être 20px * 10px pour que cela fonctionne. Les 20px / 10px dans le CSS sont là pour donner la taille du bloc afin que les éléments qui viennent après le bloc ne soient pas tous gâchés avec l'image

N'oubliez pas de conserver une copie de l'image brute dans sa taille d'origine


C'est des blagues d'appel !!
MD Ashik

3
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

2

Vous pouvez utiliser la zoompropriété. Vérifiez ce jsfiddle


1
En vérifiant le jsfiddle, les deux sont de la même taille et le zoom est surligné en rouge.
Ryan

Il ne redimensionne pas pour le moment dans Firefox 53. Espérons que cela puisse être implémenté dans une version ultérieure de Firefox. Il est bon de savoir que cela fonctionne au moins dans Chrome. :-)
Ryan

2

Vous pouvez modifier la hauteur ou la largeur de l' élément Avant ou Après comme ceci:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

1

J'ai utilisé cette largeur de contrôle de taille de police

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

1

De nos jours, avec flexbox, vous pouvez grandement simplifier votre code et ajuster seulement 1 paramètre selon vos besoins:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Maintenant, vous pouvez simplement ajuster la largeur de l'élément et la hauteur s'ajustera automatiquement, augmentez / diminuez la largeur jusqu'à ce que la hauteur de l'élément soit au nombre dont vous avez besoin.


1
Cela n'a pas fonctionné pour moi, peut-être parce que l'image est svg, peut-être parce que le parent est un conteneur flexible.
Miguel Pynto

pas sur un jpg non plusurl(//placeimg.com/800/200/arch)
BananaAcid

0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.