我可以使用 CSS 变换缩放元素并仍然保留在包含元素内吗？
我在 div 中有一个图像。我使用 CSS 变换将图像缩放至原始大小的 2.5 倍。这可行，但它覆盖了包含的 div。我希望它保留在包含的 div 中，这可能吗？
<html>
<script language="javascript">
function zoom()
{
var myLayer = document.getElementById('layer');
var myPhoto = document.getElementById('photo');
myPhoto.style["-webkit-transform-origin"] = "50% 50%";
myPhoto.style["-webkit-transform"] = "scale(2.5)";
}
</script>
<body onload="zoom();">
<div id ="layer" style="height:700px; width:1000px; background-color:yellow; text-align: center; vertical-align: middle;" onClick="javascript:toggleZoom();"><img id="photo" src="http://farm1.static.flickr.com/42/77156587_fa5aef2c4c_o.jpg" width="500" height="332"></div>
</body>
</html>
I have an image within a div. I scale the image with CSS transforms to 2.5 times its original size. That works, but it overlays the containing div. I want it to stay within the containing div, is that possible?
<html>
<script language="javascript">
function zoom()
{
var myLayer = document.getElementById('layer');
var myPhoto = document.getElementById('photo');
myPhoto.style["-webkit-transform-origin"] = "50% 50%";
myPhoto.style["-webkit-transform"] = "scale(2.5)";
}
</script>
<body onload="zoom();">
<div id ="layer" style="height:700px; width:1000px; background-color:yellow; text-align: center; vertical-align: middle;" onClick="javascript:toggleZoom();"><img id="photo" src="http://farm1.static.flickr.com/42/77156587_fa5aef2c4c_o.jpg" width="500" height="332"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您是否尝试过将溢出：隐藏在包含的div上？
Have you tried just putting overflow:hidden on the containing div?
可能使用 CSS 掩码 (http://webkit.org/blog/181/css-masks /）将 SVG 矩形图像缩放到适当的大小？
Possibly using a CSS mask (http://webkit.org/blog/181/css-masks/) with an SVG rectangle image scaled to the appropriate size?
将图像的 CSS 设置为
即可。
我在这里对图库图片执行同样的操作：
http://www.k9listener.com/gallery.html
Set the image's CSS to
and that's it.
I do the same thing here for the gallery pictures:
http://www.k9listener.com/gallery.html