javascript - 调整图像大小后在 div 内放大图像

Question

我正在尝试将高分辨率图像放入 div。 为此，我在图像上使用了属性 max-width/max-height，它非常适合。

现在我想添加按钮 - 当点击按钮时，我想在不超出 div 边界的情况下放大图像 - 换句话说，我希望图片尺寸会在带有滚动条的 div。

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

我怎样才能同时满足这 2 个需求？

代码如下:

    <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%;
}

谢谢

Answer 1

例如，如果您在 id="div1"中使用一个 div，并且图像在其中， 而且您不想超出 div 的边界，

简单地使用溢出代码，例如。

#div1{
overflow:hidden;
}

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

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