CSS control image size - adapt to width_Experience exchange

I don’t know if you have ever encountered such a situation: when controlling the size of an image in CSS, if the width of the image is hard-coded, such as img{width:500px;}, of course, if the image width is greater than 500px, it can be well controlled. Make it too large, but if the image width is less than 500px, for example, only 100px, the writing method just now will expand the image to 5 times for display. Obviously, this is not what we want to see.

So, how can CSS treat the size of these images differently? Very simple, please see:

As long as you use this code in CSS, you can control large images and small images respectively. . What it means is that if the image width is greater than 500px, then the image will be displayed in the size of 500px. If it is smaller than the width, then the image will be displayed in the original size! So, is it really simple?

Disadvantages: Increase the load on the client, which is generally implemented using js.