CSS controls image size-adaptive width

I wonder if the Taoist school has ever encountered such a situation: When the CSS controls the image size, if the width of the image is written to death, for example, IMG {width: 500px;}, of course, if the image width is greater than PX, it can be well controlled to prevent it from being too large, but if the image width is less than PX, for example, if it is only PX, the write method just now will increase the image by 5 times. Obviously, this is not what we want to see.

So how can CSS differentiate the size of these images? Easy to use. See:

CopyCodeThe Code is as follows: IMG {width: expression (this. width> 500? "500px": This. Width + "PX ");}

You can use this code in CSS to control large images and small images respectively. It means that if the image width is greater than PX, the image will be displayed in PX size. If the image width is smaller than PX, the image will be displayed in the original size! How is it? Is it really easy?

Disadvantages: Increase the client load, which is usually implemented in Js.