html - 放大窗口的一部分

Question

我正在我的网页上的特定 div 中加载一些动态内容。此内容将被缩放以完全显示在 div 中，我希望允许用户放大此 div。由于这是页面的移动版本，恐怕它太小了。屏幕的其余部分应保持不变。

HTML:

<div id="container">
   <div id="some_static_part"></div>
   <div id="dynamic_part"></div>
   <div id="some_other_static_part"></div>
</div>

CSS:

#container{
  width:100%;
  height:100%;
}

#some_static_part{
  width:100%;
  height:25%;
}

#dynamic_part{
  width:50%;
  height:75%;
}

#some_other_static_part{
  width:50%;
  height:75%;
}

Answer 1

这是对你有帮助的东西。 FIDDLE

<div id="sampleDiv" style="width: 100px; background-color: Gray;">
            Zoom Me
        </div>

编辑: FIDDLE

     <div id="sampleDiv" ondblclick="sampleDiv.style.zoom='300%'" onclick="sampleDiv.style.zoom='100%'" style="width: 100px; background-color: Gray;">
            Zoom
</div>

双击:300% 缩放
单击:返回默认值。