CSS3 new VW, VH units and CSS-positioned Frame Screen Center effect Instance page

In CSS, both VW and VH represent percentages, and you can set the height of the outer container, but use it together as a percentage.

Show

Back to related articles?

Image width (currently 1024 megapixels): 128 1024

Click on the I appear Picture bullet box

Code
CSS Code:
. Dialog_container {
    display:none;
    width:100%;
    WIDTH:100VW;
    height:100%;
    HEIGHT:100VH;
    Background-color:rgba (0,0,0,.35);
    Text-align:center;
    position:fixed;
    top:0;
    left:0;
    z-index:10;
}
. dialog_container:after {
    display:inline-block;
    content: ';
    width:0;
    height:100%;
    Vertical-align:middle;
}
. dialog_box {
    display:inline-block;
    border:1px solid #ccc;
    Text-align:left;
    Vertical-align:middle;
    position:relative;
}

. dialog_title {
line-height:28px;
padding-left:5px;
padding-right:5px;
border-bottom:1px solid #ccc;
Background-color: #eee;
font-size:12px;
Text-align:left;
}

. dialog_close {
Position:absolute;
top:5px;
right:5px;
}

. dialog_body {
Background-color: #fff;
}

. demo_image {
-webkit-transition:width. 3s;
-moz-transition:width. 3s;
Transition:width. 3s;
}
HTML code:
<div id= "Dialogcontainer" class= "Dialog_container" >
<div id= "DialogBox" class= "Dialog_box" >
<div id= "DialogTitle" class= "Dialog_title" > Dimensions dynamic variable picture </div>
<a href= "javascript:" id= "Dialogclose" class= "Dialog_close" >[off]</a>
<div id= "Dialogbody" class= "Dialog_body" >

</div>
</div>
</div>
JS Code:
(function () {
if (typeof Window.screenx = = = = "Number") {
var $ = function (selector) {
return Document.queryselector (selector);
};

elements that
var elewidth = $ ("#imageWidth"), Elerange = $ ("input[type= ' range"), Elebtn = $ ("#testButton"),
Eledialog = $ ("#dialogContainer");

Elebtn.addeventlistener ("click", Function () {
$ ("#dialogBody img"). Style.width = Elerange.value + "px";
EleDialog.style.display = "inline";
});

Elerange.addeventlistener ("click", Function () {
elewidth.innerhtml = This.value;
$ ("#dialogBody img"). Style.width = This.value + "px";
});

$ ("#dialogClose"). AddEventListener ("click", Function () {
EleDialog.style.display = "None";
return false;
});
} else {
Alert ("You are using a browser with insufficient internal force to prevent the obsession, we recommend using ie9+ or Chrome 20+ browser ~ ~");
}
})();

CSS3 new VW, VH units and CSS-positioned Frame Screen Center effect Instance page