Taille de l'image de contrôle CSS - s'adapter à l'échange width_Experience

Je ne sais pas si vous avez déjà rencontré une telle situation : lors du contrôle de la taille d'une image en CSS, si la largeur de l'image est codée en dur, comme img{width:500px;}, bien sûr, si le la largeur de l'image est supérieure à 500 px, elle peut être bien contrôlée. Rendez-la trop grande, mais si la largeur de l'image est inférieure à 500 px, par exemple seulement 100 px, la méthode d'écriture vient maintenant d'agrandir l'image jusqu'à 5 fois pour l'afficher. , ce n'est pas ce que nous voulons voir.

Alors, comment CSS peut-il traiter différemment les tailles de ces images ? Très simple, veuillez consulter :

Copier le code Le code est le suivant :

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

Tant que vous utilisez ce code en CSS, vous pouvez contrôler de grandes images et petites images respectivement. Cela signifie que si la largeur de l'image est supérieure à 500 px, alors l'image sera affichée dans la taille de 500 px. Si elle est plus petite que la largeur, alors l'image sera affichée dans sa taille d'origine ! Alors, est-ce vraiment simple ?

Inconvénients : Augmente la charge sur le client, qui est généralement implémenté à l'aide de js.