Rumah > hujung hadapan web > tutorial css > Bolehkah Anda Mengawal Ketinggian Imej Di Dalam Elemen Pseudo CSS?

Bolehkah Anda Mengawal Ketinggian Imej Di Dalam Elemen Pseudo CSS?

Barbara Streisand
Lepaskan: 2024-12-03 18:26:15
asal
462 orang telah melayarinya

Can You Control the Height of Images Inside CSS Pseudo-elements?

Mengubah Ketinggian Imej dalam Unsur Pseudo CSS: Adakah Mungkin?

Mengubah ketinggian imej yang terkandung dalam unsur pseudo CSS (:sebelum/:selepas) boleh mencabar tetapi tidak mustahil. Secara lalai, saiz semula imej tidak disokong secara langsung dengan CSS.

Untuk mencapai penskalaan yang diingini, pertimbangkan pendekatan berikut:

1. Laraskan Saiz Latar Belakang:

Untuk :selepas elemen pseudo, laraskan sifat saiz latar belakang. Walau bagaimanapun, pastikan anda menentukan lebar dan tinggi elemen blok yang mengandungi imej menggunakan sifat lebar dan tinggi.

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

Keserasian:

Berhati-hati dengan penyemak imbas keserasian apabila menggunakan kaedah ini. Rujuk Jadual Keserasian komprehensif di MDN untuk maklumat lanjut.

2. Mengubah Saiz Imej Sumber:

Sebagai alternatif, pertimbangkan untuk mengubah saiz imej asal kepada saiz bahagian pelayan yang sesuai sebelum menggunakannya dalam CSS. Ini memastikan imej akan dipaparkan pada dimensi yang dikehendaki tanpa bergantung pada penskalaan penyemak imbas.

3. Teg IMG Sebaris:

Untuk pendekatan yang lebih mudah, masukkan tag bersama unsur pseudo CSS. Pendekatan ini menjamin imej akan dipaparkan pada saiz yang ditentukan, tetapi menyimpang daripada matlamat awal untuk meminimumkan markup.

Atas ialah kandungan terperinci Bolehkah Anda Mengawal Ketinggian Imej Di Dalam Elemen Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan