Picture Center Perfect Solution

HTML code

<Divclass= "Img-contrainer">            <Divclass= "Img-illpart">                <imgsrc= "Luck0.jpg"class= "Show"alt="">                <imgsrc= "Luck0.jpg"class= "Ill"alt="">            </Div>        </Div>

1. Set the container (Img-contrainer) style and set the picture virtual container (Img-illpart) style

. Img-contrainer{width:400px;Height:300px;Border:1px solid #cecece;margin:20px Auto;position:relative; }. Img-illpart{width:100%;position:Absolute; Left:50%;Top:50%;Border:1px solid Orange; }. Img-illpart img{width:100%; }

Styles such as

2, Set the IMG (show) style, will make the style show the picture in the container center

. Img-illpart img.show {    position: absolute;     Left:-50%;     top:-50%;}

The style effect is as follows

3, set the IMG (ill) is not visible, in order to facilitate the display of the border removed it is done

. Img-illpart Img.ill {    visibility: hidden;}

Effects such as

4, look at the image can not type effect, a little flaw is that the small map will be stretched

Picture Center Perfect Solution