是否有可能在HTML中获得静态图像的可调节“视图”？

Question

我正在开发一个我有图像的网络应用程序，并且由于缺少一个更好的单词，该图像的“视图”是一个限制你可以看到图像内部的任何部分的框盒子。可以通过拖动边缘来调整视图，并保留图像。但是，我也希望能够同时拖动视图和图像。

我能想到的最好的比喻是Windows中的截图工具，用于捕捉屏幕的一部分。

我尝试过带有背景图像的div，但总是会调整图像的大小以适应div。现在我正在尝试使用包含img的div，并将div设置为overflow：hidden，但这会使图像粘在div的左上角。

帮助？提前谢谢！

Answer 1

听起来你想要一些掩盖图像的东西，只显示一个片段。

假设像。

这样的结构

<div class="img-mask">
    <img>
</div>

您可以使用宽度和高度设置要隐藏的遮罩样式（这会创建遮罩）。然后相对地，左侧和顶部定位图像，直到它到达您想要的位置。

.img-mask {
    overflow: hidden;
    height: 200px;
    width: 200px;
}
.img-mask img {
    position: relative;
    top: -25%;
    left: -25%;
}

这应该使图像居中于面具。

Answer 2

我认为这个任务有一个CSS属性：剪辑属性。

这是W3schools教程：http://www.w3schools.com/cssref/pr_pos_clip.asp。单击自己尝试按钮以获得实际操作的想法。

这样，CSS属性仅适用于图像，您不需要额外的屏蔽div。