masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > teks badan

Saiz imej kawalan CSS - sesuaikan dengan pertukaran width_Experience

WBOY
Lepaskan： 2016-05-16 12:05:26
asal
1863 orang telah melayarinya

Saya tidak tahu sama ada anda pernah mengalami situasi sedemikian: semasa mengawal saiz imej dalam CSS, jika lebar imej dikodkan keras, seperti img{width:500px;}, sudah tentu, jika lebar imej lebih besar daripada 500px, ia boleh dikawal dengan baik, tetapi jika lebar imej kurang daripada 500px, contohnya, hanya 100px, kaedah penulisan tadi akan mengembangkan imej kepada 5 kali. Jelas sekali , ini bukan yang kita mahu lihat.

Jadi, bagaimanakah CSS boleh merawat saiz imej ini secara berbeza? Sangat mudah, sila lihat:

Salin kod Kodnya adalah seperti berikut:

img{width :expression(this.width>500?"500px":this.width+"px"); }

Selagi anda menggunakan kod ini dalam CSS, anda boleh mengawal imej besar dan imej kecil masing-masing. Maksudnya ialah jika lebar imej lebih daripada 500px, maka imej akan dipaparkan dalam saiz 500px Jika ia lebih kecil daripada lebar, maka imej akan dipaparkan dalam saiz asal. Jadi, adakah ia sangat mudah?

Kelemahan: Tingkatkan beban pada klien, biasanya dilaksanakan dengan js.
Label berkaitan：
css 图片大小
sumber：php.cn
Artikel sebelumnya：Kotak teks css menutup kaedah input_Pertukaran pengalaman Artikel seterusnya：Penyelesaian kepada div sentiasa disekat oleh pertukaran select_Experience
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
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan