如果隐藏溢出，则使用 css 变换缩小的图像将被裁剪

Question

我有一个比视口大的图像（或者更一般地说，<div> 中的一些内容）。

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

overflow: hidden;

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

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

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

不幸的是，当图像缩小时，最初不可见的部分在调整图像大小时仍然隐藏 ，因为 overflow: hidden 属性

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

这是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> 封装到相同的 wrapper <div> 中来解决尺寸。

然后 overflow: hidden 应用于 wrapper，而转换仍然适用于 wrapped <div>

Fiddle

如果隐藏溢出，则使用 css 变换缩小的图像将被裁剪

Scaled down image with css transform is cropped if overflow is hidden

html

overflow

css-transforms