CSS Centering Collection & Image viewport maximization

Http://www.w3cplus.com/css/vertically-center-content-with-css

CSS Production horizontal Vertical center alignment (the method of horizontal and vertical centering, respectively, analysis of pros and cons)

Http://www.cnblogs.com/rubylouvre/p/3274273.html

CSS Center (more comprehensive centering method)

http://www.zhangxinxu.com/wordpress/?p=3794

Zhang: Margin:auto to achieve horizontal vertical centering of absolutely positioned elements

http://www.zhangxinxu.com/wordpress/?p=61

Zhang: The horizontal vertical center of a picture with no fixed size and multiline text

The reason to find the center is because to do the picture full screen display effect, I want to do the effect is actually this:

That is , the picture to maximize the proportion of display, if large and high, then the width of the screen 100%, tall and wide when the Gao Jian screen 100%. it is not desired to try multiple centering methods at first, and the only way to do this is to set the absolute positioning of the container:

<Divclass= "Container">    <imgsrc= "Images/pic.jpg" /></Div><styletype= "Text/css">. Container{position:Absolute; Left:50%;Top:50%;Transform:Translate ( -50%, -50%); }img{width:100%;}</style>

The problem is that when the picture is wide, the width:100% is set, and the picture is a long chart. height:100% is required. This will require the use of JS to determine the operation, very pit dad.

Today I happen to see an article: Layout https://github.com/xiangpaopao/blog/issues/9 like a picture

It mentions the background map setting Background-size:contain can scale the maximum value of the image, so that the width and height can be placed into the content area, suddenly, such a layout can completely picture as background processing, try as follows:

This container with a background map must have a height, and JS is required to get the current screen viewport height.

<styletype= "Text/css">. Container{background:URL ("images/pic.jpg") Center Center No-repeat;background-size:contain;    }</style><Divclass= "Container"ID= "contain"></Div><Scripttype= "Text/javascript">window.onload= function() {varcontain=document.getElementById ("contain"), H=Window.innerheight; Contain.style.height=h+ "px";}</Script>

The effect is this:

Ideal state. And then change the high picture.

Perfect Solution ~

Summarize the knowledge points used:

1.background

Background-position: Background image position, can be top/bottom/left/right/center, can also be numeric and percentage (two values are horizontal, vertical);

Background-repeat:repeat | repeat-x | repeat-y | no-repeat | inherit，规定图像如何重复；

Background-attachment:

Scroll The background image scrolls along with the chunks that contain it.

Fixed The background image does not scroll along with the element that contains it, but remains fixed to a position on the screen.

The origin value is ignored when the attachment value is set.

Background-size:

Cover Zoom the background picture to completely cover the background area, possibly invisible to the background image section. (Can be used when setting the full screen background of a Web page)

Auto Scales the background image to the background image. Cover will stretch the picture to fill the screen, which may distort the picture, and auto will guarantee the original proportions of the picture.

contain; Zooms the background image to fit completely into the background area, possibly partially blank in the background area. is the effect above.

　　　　<length>Value that specifies the background picture size and cannot be negative. It is best to specify the width height separately.

　　　　<percentage>值，指定背景图片相对背景区（Background positioning area) as a percentage. The background area is background-origin set by default to the box model's content area and padding, or it can be set to only the content area, or it also includes a border. If attachment fixed It is, the back area is the browser visual region (that is, the viewport), excluding the scroll bar. cannot be a negative value.

Both Ps:background-size and Background-origin are CSS3 properties.

2. Various sizes in the window (RPM)

<Script>functionGetInfo () {vars= ""; S+= "width of visible area of Web page:"+Document.body.clientWidth; S+= "Web page Visible Area High:"+Document.body.clientHeight; S+= "width of visible area of Web page:"+Document.body.offsetWidth+ "(including edges and width of scroll bars)"; S+= "Web page Visible Area High:"+Document.body.offsetHeight+ "(including the width of the edge)"; S+= "page Body Full text width:"+Document.body.scrollWidth; S+= "page Body Full text High:"+Document.body.scrollHeight; S+= "The Web page is rolled away high (FF):"+Document.body.scrollTop; S+= "Web page is rolled away high (ie):"+Document.documentElement.scrollTop; S+= "webpage is rolled away left:"+Document.body.scrollLeft; S+= "on the body part of the webpage:"+Window.screentop; S+= "page body part left:"+Window.screenleft; S+= "High screen resolution:"+Window.screen.height; S+= "width of screen resolution:"+Window.screen.width; S+= "screen usable workspace height:"+Window.screen.availHeight; S+= "screen Usable workspace width:"+Window.screen.availWidth; S+= "your screen settings are"+window.screen.colorDepth+"bit color"; S+= "your screen settings"+Window.screen.deviceXDPI+"pixels per inch"; //alert (s);}getinfo ();</Script>

CSS Centering Collection & Image viewport maximization