CSS control picture Size-Fit Width _ Experience Exchange

Do not know whether the home has encountered such a situation: in the CSS control picture size, if the width of the picture to write dead, such as img{width:500px;}, if the width of the picture is greater than 500px can be very good control it does not make it too large, but if the picture width is less than 500px, For example, only 100px, just the writing will enlarge this picture 5 times times the display, obviously, this is not what we want to see.

So, how can css distinguish between the size of these images? Very simple, please see:

Copy the Code code as follows:
Img{width:expression (this.width>500? ") 500px ": this.width+" px "); }

As long as you use this code in CSS, you can control the big picture and the small picture separately. It means that if the image width is greater than 500px, then the image is displayed in 500px size, if less than, then the image is displayed according to the original size! What, is it really simple?

Disadvantages: Increase the load of the client, generally using JS to achieve more.

