html - 使图像从 div 中弹出

Question

我有一个包含 2 个 div 的 html 页面， div1 和 div2 垂直占据 50% 的屏幕。

我在 div2 中有一张图片。我有一个按钮，单击该按钮时，我需要图像从所有 div 中占据 100% 的屏幕，然后单击第二个按钮返回到 div2 中的原始位置。

这可能吗？

Answer 1

看这个fiddle

在 fiddle 中，我将图像的位置设置为绝对位置，并在单击 fullscreen 按钮时将其高度和宽度设置为 100%。

HTML

<div class="testDiv div1"></div>
<div class="testDiv div2">
    <img id="myImg" src="http://pngimg.com/upload/grass_PNG4930.png" />
    <button onclick="fullscreen();">Fullscreen</button>
    <button onclick="closefs();">Close</button>
</div>

JS

function fullscreen() {
    var elt=document.getElementById('myImg');
    elt.style.position = 'absolute';
    elt.style.height = "100%";
    elt.style.width = "100%";
    elt.style.top = "0";
    elt.style.bottom = "0";
    elt.style.left = "0";
    elt.style.right = "0";
}

function closefs() {
    var elt=document.getElementById('myImg');
    elt.style.position = 'static';
    elt.style.height = "50px";
    elt.style.width = "50px";

}