DOM element Full Screen Display solution (cont.)

The implementation element full-screen scheme in the previous article only fits into a single element (the element contains no other elements), but what if there are other elements? Like buttons or something like that. Such as:

Add-webkit-full-screen{width:100%; height:100%;} then the full-screen display becomes:

The 1,button uses left and top to locate the image. If you use bottom and right to locate the image

We will find that the element size is as large as screen in fullscreen mode, but the element size and position settings are still original, which is why the above situation occurs.

So what do we do to make sure that the parent element is full-screen and that its child elements remain synchronized relative to the parent element in size and position? In fact, we can use the Zoom property in CSS, that is, the parent element directly to the scale operation. This makes the child elements zoom out together. For example:

var rateheight = parsefloat (screen.height)/$ ("#div"). Height (), var ratewidth = parsefloat (screen.width)/$ ("#div"). Width (); $ ("#div"). CSS ("Zoom", Ratewidth > Rateheight rateheight:ratewidth);

By calculating the dimensions of the element and screen to determine the value of zoom, and to ensure that the element is not variant in full-screen mode, there may be black edges (if the ratio of the element wh is different from the Sreeen WH ratio, the screen is only guaranteed to fill in one direction) and then copied to zoom. In order to simplify the operation jquery is used here. The results are as follows:

OK, so that you can basically meet the requirements, if there are other questions please contact me, front end Technical Exchange Group: 139761568

DOM element Full Screen Display solution (cont.)