HTML img Image does not deform proportional scaling, compatible ie6__html

Method 1

IMG only defines a wide (or high) degree can be proportional scaling, outside add a box, set wide and overflow:hidden; Can

Method 2

In the IMG tag only set wide, not set high, the picture will be proportional scaling.

Method 3

or the picture as a background picture. Background-position:center Center

Tips

Use max-width:300px or max-height:100px to solve the picture scaling. However, there is a problem, if you zoom by width, but the picture is too high will exceed the overflow box, this time need to use Overflow:hidden to the parent to hide beyond the picture content. But using Max-width or MAX-HEIGHT,IE6 is not supported, we need to set up a width:expression (This.width > 300?). "300px": this.width) or height:expression (this.height>100?) 100px ": this.height);

Resolve IE6 Support Max-height
div CSS Solution IE6 support Max-width

In general, you only need to set the width limit, such as only set the maximum width of 300px (max-width:300px), and then use Overflow:hidden hide overflow picture for the parent, and for compatibility IE6 we set a width:expression (This.width > 300?) "300px": this.width);

<! DOCTYPE html>