Javascript 调整图像大小后缩放div内的图像

我正试图把一个高分辨率的图像放到div中。 为此，我在图像上使用了属性max width/max height，它非常适合

现在我想添加按钮-当单击按钮时，我想放大图像而不离开div的边框-换句话说，我希望图片尺寸在div内随着滚动而增大。

问题是缩放属性的效果不太好——我想这是因为我在图像上使用了最大宽度来调整大小

我怎样才能把这两个要求结合起来呢

代码如下：

    <div id="maps-content" class="maps-content">
            <div id="map-frame">
                <img src="images/empty_diagram.png" />
            </div>
            <div id="img-buttons">
                <asp:Button ID="zoom_in_btn" runat="server" Text="Zoom In" OnClientClick="ZoomIn();return false;" />
                <asp:Button ID="zoom_out_btn" runat="server" Text="Zoom Out" OnClientClick="ZoomOut();return false;" />
            </div>
        </div>



div#maps-content {
    height: 90%;
    background-color: blue;
}
div#map-frame {
    /*position: relative;
    height: 90%;*/
    background-color:darkgoldenrod;
}
div#img-buttons {
    /*position: relative;
    height: 10%;*/
    background-color:red;
}
div#map-frame img {
    max-width: 100%;
    max-height:100%;
}

div#映射内容{
身高：90%；
背景颜色：蓝色；
}
div#映射框{
/*位置：相对位置；
身高：90%*/
背景颜色：暗金色；
}
div#img按钮{
/*位置：相对位置；
身高：10%*/
背景色：红色；
}
div#图幅img{
最大宽度：100%；
最大高度：100%；
}

---

谢谢

例如，如果您在id=“div1”中使用div，并且图像在其中， 你也不想离开分区的边界

只需使用溢出代码，例如

#div1{
overflow:hidden;
}

这将隐藏div1之外的所有内容

---

请提供代码或屏幕快照，以便我们提供帮助。

您是否有一些代码可以粘贴到此处，以便我们随时更好地了解问题所在。要获得更好的解决方案，请提供一些代码或快照。