Question

我有一个比视口大的图像（或者更常见的是<div>中的一些内容）。

由于不希望用户看到图像的一部分不可见，所以我设置了css属性

overflow: hidden;

这样可以防止滚动条和滚动条出现。

然后在某些时候（用户交互），使用CSS动画缩小图像，例如：

transition: transform 0.5s;
transform: scale(0.5);

不幸的是，由于overflow: hidden属于

，因此图像会缩小其初始可见的部分仍会隐藏，因为图像的大小调整为<strong>

有没有办法避免这种情况？

以下是fiddle

HTML

<body>
    <div id="container">
        <img id="picture" src="https://www.nasa.gov/sites/default/files/images/453915main_2010-3355_full.jpg"/>
    </div>
</body>

CSS

#container {
    overflow: hidden;
    position: absolute;
    display:  block;
    left:     10px;
    top:      10px;
    width:    500px;
    height:   500px;
}

#picture {
    position: absolute;
    width:    3000px;
    height:   2000px;
    left:    -1000px;
    top:     -500px;
}

JS

$(function()
{
    $('#container').on('click', resize);
}
);

function resize()
{
    $('#container').css(
    {
        'transition': 'transform 0.5s',
        'transform':  'scale(0.5)'
    } );
}

Answer 1

问题的产生是因为转换也适用于转换元素的width和height属性。

此问题可以通过将缩放后的<div>括在相同大小的包装 <div>中来解决。

然后{<1}}应用于包装，而转换仍然适用于已包装的overflow: hidden

Fiddle

如果隐藏溢出，则会裁剪带有css变换的缩小图像

1 个答案: