CSS 疑似要素内の画像の高さを制御できますか?

CSS 疑似要素での画像の高さの変更: 可能ですか?

CSS 疑似要素内に含まれる画像の高さの変更(:before/:after) は難しいかもしれませんが、不可能ではありません。デフォルトでは、画像のサイズ変更は CSS で直接サポートされていません。

希望のスケーリングを実現するには、次のアプローチを検討してください。

1. Background-Size の調整:

:after 疑似要素の場合、background-size プロパティを調整します。ただし、幅と高さのプロパティを使用して、画像を含むブロック要素の幅と高さを必ず指定してください。

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

互換性:

ブラウザに注意してください。この方法を使用する場合の互換性。詳細については、MDN の包括的な互換性表を参照してください。

2.ソース画像のサイズ変更:

または、CSS で使用する前に、元の画像をサーバー側で適切なサイズにサイズ変更することを検討してください。これにより、ブラウザのスケーリングに依存せずに画像が希望のサイズで表示されます。

3.インライン IMG タグ:

より単純なアプローチの場合は、インライン を組み込みます。タグを CSS 疑似要素の横に追加します。このアプローチでは、画像が指定されたサイズでレンダリングされることが保証されますが、マークアップを最小限に抑えるという当初の目標からは逸脱します。

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