调整图像大小后放大图像内的图像
问题描述:
我试图把高分辨率的图像放入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%;
}
谢谢
答
例如,如果你使用ID =“DIV1”内一个div和图像里面, 你不想让走出div的边界,
只需使用溢出代码,为前。
#div1{
overflow:hidden;
}
这将隐藏div1以外的所有内容。
请提供一个代码,或者屏幕捕捉,所以我们可以提供帮助。
+0
上面提供 - 谢谢 –
+0
随时。为更好的解决方案提供一些代码或snapshoots。 –
您是否有一些代码可以粘贴到这里,以便我们更好地理解问题所在? –
编辑 - 谢谢 –