Question

我在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>

Answer 1

您是否尝试过将overflow：hidden隐藏在包含div？

上

Answer 2

可能使用CSS掩码（http://webkit.org/blog/181/css-masks/），SVG矩形图像缩放到合适的大小？

Answer 3

将图像的CSS设置为

#image
{
    width: 100%;
}

就是这样。

我在这里为画廊图片做同样的事情：

http://www.k9listener.com/gallery.html

我可以使用CSS变换缩放元素并仍然保留在包含元素中吗？

3 个答案: