Question

我正在尝试创建一个以壁画为背景的页面。当您点击壁画的某些部分时，会发生不同的事情。

为了考虑不同的浏览器/屏幕/设备尺寸，壁画比它宽。所以我将图像设置为始终是浏览器的宽度。由于壁画上到处都有可点击的元素，我需要垂直滚动。

我尝试了很多不同的CSS样式，我可以让图像水平缩放，但它永远不允许我垂直滚动以适应图像大小。一旦我进行了图像缩放，我就可以根据图像大小/％来实现可点击元素。

有没有人有任何建议或能指出我正确的方向？

*编辑对不起，我没有把我正在使用的CSS，我做的时候有点累。

html {
    background-image:url('1.jpg');
    background-repeat:no-repeat;
    background-attachment:absolute;
    background-size:cover;
}

Answer 1

.grow { transition: all .2s ease-in-out; }
.grow:hover, .focus { transform: scale(1.1); }

或

$('.grow').on('click',function(){
   $(this).css({
          'transition': 'all .2s ease-in-out',
          'transform': 'scale(1.1)'
    });
});