Pure CSS achieves image proportional scaling without expressions (IE7 and above are supported)

When creating webpages, we often encounter a situation where we need to place images of unknown sizes in a fixed-width container. At this time, we need to consider the following issues: only one of the image width or height can achieve proportional scaling, but the image size may exceed the container size. Setting a fixed width or height for an image may cause deformation of the image. Some may simply solve it with JavaScript: 100) {this. width = 100;} if (this. height> 100) {this. height = 100;} "/> but the image deformation still occurs when the image length and width are large. The code for optimizing the scaling algorithm is as follows: <! Doctype html>