CSS-Steuerbildgröße – an width_Experience-Austausch anpassen

Ich weiß nicht, ob Sie jemals auf eine solche Situation gestoßen sind: Wenn Sie die Größe eines Bildes in CSS steuern und die Breite des Bildes fest codiert ist, z. B. img{width:500px;}, ist dies natürlich der Fall Ist die Bildbreite größer als 500 Pixel, kann dies gut gesteuert werden. Wenn die Bildbreite jedoch beispielsweise weniger als 500 Pixel beträgt, wird das Bild durch die Schreibmethode offensichtlich auf das Fünffache erweitert , das ist nicht das, was wir sehen wollen.

Wie kann CSS die Größen dieser Bilder unterschiedlich behandeln? Ganz einfach, siehe:

Code kopieren Der Code lautet wie folgt:

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

Solange Sie diesen Code in CSS verwenden, können Sie große Bilder steuern und kleine Bilder bzw. Das heißt, wenn die Bildbreite größer als 500 Pixel ist, wird das Bild in der Größe von 500 Pixel angezeigt. Ist sie kleiner als die Breite, wird das Bild in der Originalgröße angezeigt! Ist es also wirklich einfach?

Nachteile: Erhöhen Sie die Belastung des Clients, was im Allgemeinen mit js implementiert wird.