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

Question

我正在尝试将高分辨率图像放入 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%;
}

谢谢

Answer 1

例如，如果您在 id="div1" 中使用 div 并且图像在其中， 而你又不想走出 d​​iv 的边界，

例如，只需使用溢出代码。

#div1{
overflow:hidden;
}

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

请提供代码或屏幕截图以便我们提供帮助。