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并且图像在其中，而且你不想离开div的边界，

只需使用溢出代码，例如

#div1{
overflow:hidden;
}

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

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

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

1 个答案: