Как фоновый размер относится к элементу?

Извините заранее, если название моего вопроса кажется неясным. Я пытаюсь создать инструмент, который позволит пользователю щелкнуть в любом месте изображения и вырезать фрагмент этого изображения для последующего использования, аналогично тому, что вы найдете на eBay или Amazon, когда вы увеличиваете изображение, просто наводя мышью над ним.

Мой подход (и, пожалуйста, дайте мне знать, если есть лучший вариант) состоит в том, чтобы установить фоновое изображение фрагмента для наблюдаемого изображения. Размер фона должен быть установлен таким образом, чтобы размер изображения на фоне фрагмента соответствовал размеру изображения, отображаемого на странице. Оттуда я беру разницу в смещениях между контейнером изображения и контейнером фрагмента и использую компоненты 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>

Источник

3 ответа

Качай головой...

Параметры для background-size являются width а потом heightне height а потом width,

https://css-tricks.com/almanac/properties/b/background-size/

Источник

Оставьте размер фона в покое, чтобы он по умолчанию соответствовал размеру изображения. Вместо этого получите процент от верхней / левой позиции, по которой вы щелкнули, используя 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-position'.

$(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')
            });
#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;
}
<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>

Источник
Другие вопросы по тегам