Question

如果我的问题标题不清楚，请提前告诉我。我正在尝试创建一个工具，允许用户点击图像内的任何位置，并将该图像的片段剪切掉供以后使用，类似于您在eBay或亚马逊上只需通过悬停缩放图像时找到的内容在它上面。

我的方法（如果有更好的方法，请告诉我）是将片段的背景图像设置为正在观察的图像。必须设置背景大小，使得片段背景中图像的大小是页面上显示的图像大小。从那里，我采用图像容器和片段容器之间的偏移差异，并使用X和Y组件设置负背景位置。

我面临的问题是，当我将背景大小设置为与图像大小相同时，片段内的背景图像的大小远小于所观察图像的大小。有什么想法吗？

这是我到目前为止所做的：

console.log($("#snippet").offset().top - $("#image").offset().top);


$(window).click(function(event) {
    $("#snippet").css("top", event.pageY);
    $("#snippet").css("left", event.pageX);
});

#image {
    height: 19em;
    width: auto;

    border: 2px solid orange;
}

#snippet {
    background: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg);
    background-repeat: no-repeat;
    background-position: -200px -10px;
    background-size: 19em auto;

    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    border: 1px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" />
        <script src="js/jquery.min.js"></script>
    </head>

    <body>
        <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg">
        <div id="snippet"></div>

        <script src="js/sneakapeek.js"></script>
    </body>
</html>

Answer 1

摇摇头......

background-size的参数为width，然后是height，而不是height，然后是width。

https://css-tricks.com/almanac/properties/b/background-size/#article-header-id-2

Answer 2

要将背景图像正确定位在剪切内部，您需要设置背景位置＆＃39;相应

＆＃13;

$(window).click(function(event) {
                $("#snippet").css("top", event.pageY);
                $("#snippet").css("left", event.pageX);
                var offset = $('#image').offset()
                $("#snippet").css("background-position", (-event.pageX + offset.left) + 'px ' + (-event.pageY + offset.top) + 'px')
            });

＆＃13;

#image {
    height: 19em;
    width: auto;

    border: 2px solid orange;
}

#snippet {
    background: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg);
    background-repeat: no-repeat;
    background-position: -200px -10px;
    background-size: auto 19em;

    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    border: 1px solid yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" />
        <script src="js/jquery.min.js"></script>
    </head>

    <body>
        <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg">
        <div id="snippet"></div>

        <script src="js/sneakapeek.js"></script>
    </body>
</html>

＆＃13;

Answer 3

单独保留背景大小，因此默认为图像大小。相反，使用e.offsetY/X除以图像高度/宽度并乘以100得到您点击的上/左位置的百分比，然后将其用作代码段的background-position。

var $snippet = $("#snippet"),
    $img = $("#image");
  
$(window).on('load',function() {
    var imgW = $img.width(),
        imgH = $img.height();
        
    $img.on("click", function(event) {
      var topP = event.offsetY / imgH * 100,
      leftP = event.offsetX / imgW * 100;

      $snippet.css({
        "background-position-y": topP + "%",
        "background-position-x": leftP + "%",
        top: event.pageY,
        left: event.pageX
      });
    });
});

* {box-sizing:border-box;}
#image {
  height: 19em;
  width: auto;
  border: 2px solid orange;
}

#snippet {
  background-image: url(https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100px;
  width: 100px;
  border: 1px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/sneakapeek.css" />
  <script src="js/jquery.min.js"></script>
</head>

<body>
  <img id="image" src="https://i.ytimg.com/vi/CP0bGdEj_xg/maxresdefault.jpg">
  <div id="snippet"></div>

  <script src="js/sneakapeek.js"></script>
</body>

</html>

background-size如何与元素相关？

3 个答案: