Puis-je changer la hauteur d'une image en CSS: pseudo-éléments avant /: après?
Supposons que je veuille décorer des liens vers certains types de fichiers en utilisant une image. Je pourrais déclarer mes liens comme
<a href='foo.pdf' class='pdflink'>A File!</a>
alors avoir CSS comme
.pdflink:after { content: url('/images/pdf.png') }
Maintenant, cela fonctionne très bien, sauf si pdf.png n'est pas la bonne taille pour le texte de mon lien.
J'aimerais pouvoir dire au navigateur de redimensionner l'image :after, mais je ne peux pas me 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 suis enclin à a) redimensionner l’image source afin 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".
Le réglage de background-size est autorisé. Vous devez toutefois 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:"";
}
_Notez que le pseudo-élément :after est une boîte contenant à son tour l'image générée. Il n'y a aucun moyen de styliser l'image, mais vous pouvez styler la boîte.
Ce qui suit est juste une idée, et le solution ci-dessus est plus pratique.
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
Inconvénients: vous devez connaître les dimensions intrinsèques de l’image, ce qui vous laisse un peu d’espace, que je ne parviens pas à supprimer de l’ATM.
Comme mon autre réponse n’était évidemment pas bien comprise, voici une deuxième tentative:
Il y a deux approches pour répondre à la question.
Pratique (montrez-moi la foutue photo!)
Oubliez le pseudo-sélecteur :after 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 la suivante: pouvez-vous styliser le contenu généré ? La réponse est: non, vous ne pouvez pas. Il y a eu un longue discussion sur la liste de diffusion du W3C sur cette question, mais aucune solution à ce jour.
Le contenu généré est rendu dans une boîte générée et vous pouvez styliser cette boîte, mais pas le contenu en tant que tel . Différents navigateurs affichent des comportements très différents
#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 pour les deux cas
(de 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 éléments tels que http://jsfiddle.net/Nwupm/1/ , où plusieurs éléments sont générés. Gardez à l'esprit que CSS3 en est encore à ses débuts et que ce problème n'a pas encore été résolu.
Vous devez utiliser un arrière-plan plutôt qu'une 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;
}
Voici une autre solution (de travail): redimensionnez simplement vos images à la taille souhaitée :)
.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}
vous avez besoin que pdf.png soit 20px * 10px pour que cela fonctionne. Les 20px/10px dans le fichier css sont ici pour donner la taille du bloc afin que les éléments qui suivent le bloc ne soient pas tous altérés avec l'image.
N'oubliez pas de conserver une copie de l'image brute dans sa taille originale
diplay: block; n'a aucun effet
positionin fonctionne également très étrangement, en particulier pour les fondamentaux du front-end, alors soyez prudent
body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}
.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:"";
}
Vous pouvez changer 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;
}
Vous pouvez utiliser la propriété zoom. Vérifiez this jsfiddle
J'ai utilisé cette largeur de contrôle de la taille de la police
.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');
background-size: 100%;
content: ".......................................";
font-size: 30pt;
}
De nos jours, avec flexbox, vous pouvez grandement simplifier votre code et n’ajuster que 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’ajuste automatiquement, augmentez/diminuez la largeur jusqu’à ce que la hauteur de l’élément atteigne le nombre voulu.
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;