CSS 擬似要素で画像のサイズを変更できますか?

画像の高さの変更は CSS 擬似要素 (:before/:after) で実現できますか?

外観をカスタマイズするために特定のファイル タイプの場合、開発者は画像を装飾要素として組み込むことができます。 などのリンクにクラスを割り当てることで、CSS を利用して後で画像を表示できます。

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

このアプローチでは効果的に画像をリンクに追加します。の場合、リンクテキストに基づいて画像のサイズを変更するのが困難になります。擬似要素内の画像を拡大縮小する機能は、Web 開発における長年の疑問でした。

背景画像のサイズを変更する従来の方法は、擬似要素には適用できません。ただし、画像のサイズ変更の一部のサポートは、background-size プロパティを通じて実現できます。

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

このアプローチには、周囲のブロックの幅と高さを明示的に定義しながら背景サイズを調整することが含まれます。この手法では互換性が制限されていることに注意することが重要です。 MDN 互換性表には、ブラウザのサポートに関する詳細が記載されています。

以上がCSS 擬似要素で画像のサイズを変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。