Javascript 从div中弹出图像

如何将图像从其div中弹出，并将其宽度设置为100%（以便占据大部分屏幕）？注意：我不想使用任何插件

到目前为止，我有：

<div class="container">
    <img src="thumbnail_image.png" />
</div>

---

我该怎么做？

您可以使用css位置固定。定义这样一个类：

.fullscreen_image {
    position: fixed;
    top: 0;
    left: 0
    width: 100%;
}

<div id="container">
    <img src="http://i.stack.imgur.com/QWQds.jpg?s=128&g=1" class="thumbnail"/>
</div>

然后可以为图像添加和删除此类

$(this).addClass( 'fullscreen_image' );

---

您需要这样做：

.fullscreen_image {
    position: fixed;
    top: 0;
    left: 0
    width: 100%;
}

<div id="container">
    <img src="http://i.stack.imgur.com/QWQds.jpg?s=128&g=1" class="thumbnail"/>
</div>

---

选中

您可以创建jQuery/javascript lightbox，请查看以下链接：