css - 当我使用 CSS3 缩放图像时，可见区域更小

Question

当我使用 CSS3 缩放缩放图像时，图像的尺寸更大，但我看不到整个图像。即使有滚动条，我也只能看到图像的一部分。

单击此链接可查看演示。

var scale = 1;
$('img').on('click',function(){
    var new_scale = 2 * scale;
    $(this).css('-webkit-transform', 'scale(' + new_scale +')');
    scale = new_scale;
});

我想知道如何在 CSS3 缩放后看到整个图像。

Answer 1

CSStransform属性仅影响元素的呈现内容。

如果您希望元素的布局占用更多空间，则需要明确调整其宽度和高度。

Answer 2

当您缩放时，适当地更改图像左侧和顶部的填充...

例子

img
{
 padding-left: 17%;
padding-top: 19%;
}