Saiz imej kawalan CSS - sesuaikan dengan pertukaran width_Experience

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.