Pouvez-vous contrôler la hauteur des images à l'intérieur des pseudo-éléments CSS ?

Modifier la hauteur d'une image dans des pseudo-éléments CSS : est-ce possible ?

Modifier la hauteur d'une image contenue dans un pseudo-élément CSS (:avant/:après) peut être difficile mais pas impossible. Par défaut, le redimensionnement de l'image n'est pas directement pris en charge avec CSS.

Pour obtenir la mise à l'échelle souhaitée, envisagez les approches suivantes :

1. Ajuster la taille de l'arrière-plan :

Pour les pseudo-éléments :after, ajustez la propriété background-size. Cependant, assurez-vous de spécifier la largeur et la hauteur de l'élément de bloc contenant l'image à l'aide des propriétés width et height.

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

Compatibilité :

Faites attention au navigateur compatibilité lors de l’utilisation de cette méthode. Reportez-vous au tableau de compatibilité complet sur MDN pour plus d'informations.

2. Redimensionnement de l'image source :

Vous pouvez également envisager de redimensionner l'image originale à la taille appropriée côté serveur avant de l'utiliser dans le CSS. Cela garantit que l'image s'affichera aux dimensions souhaitées sans dépendre de la mise à l'échelle du navigateur.

3. Balise IMG en ligne :

Pour une approche plus simple, intégrez une balise balise à côté du pseudo-élément CSS. Cette approche garantit que l'image sera rendue à la taille spécifiée, mais s'écarte de l'objectif initial de minimiser le balisage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!