代码之家 › 专栏 › 技术社区 › Johannes Fahrenkrug

我是否可以使用css转换缩放元素并仍保留在包含元素内?

transform webkit css

Johannes Fahrenkrug · 技术社区 · 15 年前

我在一个分区中有一个图像。我用css转换将图像缩放到原来大小的2.5倍。这是可行的,但它覆盖了包含的分区。我希望它保持在包含的分区内,这是可能的吗?

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

3 回复 | 直到 12 年前

Russell Leggett 15 年前

你试过把溢出:隐藏在包含的分区上吗?

Antonio Salazar Cardozo 15 年前

可能使用CSS掩码( http://webkit.org/blog/181/css-masks/ )将SVG矩形图像缩放到适当的大小?

Gary Willoughby 15 年前

将图像的CSS设置为

#image
{
    width: 100%;
}

就这样。

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

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

推荐文章

geany_tab_title_color · 如何将4个div围绕一个中心div?

3 年前

Martin Fric · 使用变换时,Div容器仍保持原始图像大小的大小

7 年前

Niko · 边框css更改速度快于变换旋转

7 年前

Leon1988 · 标题中多行的斜边

7 年前

Levi · 如何使用jq将多个输出对象组合成单个对象

7 年前

Mose · SVG变换:根据X缩放Y

7 年前

spoilerd do · 统一变换。前进是不断变化的

7 年前

Paul · 悬停时变换比例不缩放

7 年前

listener · 在Python中创建音频文件的振幅与频谱图

7 年前

Pep · Matlab-Hough变换中的帧线

7 年前