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

Question

我试图把高分辨率的图像放入div。 要做到这一点，我使用图像上的属性最大宽度/最大高度，它完全适合。

现在我想添加按钮 - 点击按钮时，我想放大图像而不会脱离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以外的所有内容。

请提供一个代码，或者屏幕捕捉，所以我们可以提供帮助。