How can I use CSS to control the adaptive size of images?

Automatic Image resizing is a very common function. When making images, you must control the image size to prevent them from being opened in the container, can we use CSS to control the image size to make it adaptive?
We have come up with a simple solution, although not perfect. If your requirements are not very high, they can already meet your needs. Let's look at the following code:

The code is as follows:	Copy code
Div img { Max-width: 600px; Width: 600px; Width: expression (document. body. clientWidth> 600? "600px": "auto "); Overflow: hidden; }

◎ Max-width: 600px; the maximum width of other non-IE browsers, such as IE7 and FF, is 600px. However, it is invalid in IE6.
◎ Width: 600px; the image size in all browsers is 600px;
◎ When the image size is greater than 600px, it is automatically reduced to 600px. Valid in IE6.
◎ Overflow: hidden; hide the excess part to avoid opening deformation caused by failed Image size control.