我希望我的图像可以在中心被裁剪,并能够左右上下移动,同时保持覆盖整个屏幕以适应整个屏幕。用户只能看到图像的某一部分,并且可以像下面的链接一样移动,但他的视点是适合屏幕的小矩形。到目前为止,我只得到了我图像的左上角被裁剪的效果。
如果我没有表达清楚我想要实现的效果,请参考以下链接,但用户不能看到更多的正方形。 https://www.w3schools.com/howto/howto_js_image_zoom.asp 如果您偶然遇到这个问题,我很快就会关闭这张门票。如果您碰巧遇到这个问题,请查看这个问题,我相信我在这里已经尽可能清楚了。 如何自由裁剪您的图像
如果我没有表达清楚我想要实现的效果,请参考以下链接,但用户不能看到更多的正方形。 https://www.w3schools.com/howto/howto_js_image_zoom.asp 如果您偶然遇到这个问题,我很快就会关闭这张门票。如果您碰巧遇到这个问题,请查看这个问题,我相信我在这里已经尽可能清楚了。 如何自由裁剪您的图像
<style>
img {
background-position: cover;
position: absolute;
clip:rect(0px,500px,500px,0px);
}
.image1 {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class='clipper-div'>
<img class='image1' src='office.gif'/>
</div>