背景大小如何与元素相关？

对不起，如果我的问题的标题似乎不清楚。我正在尝试创建一个工具，允许用户点击图片中的任意位置，并将该图片的片段剪下以备后用，类似于您在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>

来源

2017-08-02 Zulfe

摇摇头......

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

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

来源

2017-08-02 13:43:56 Zulfe

要定位的正确的剪断里面的背景图片，你需要设置相应的“背景位置”。

$(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>

来源

2017-08-02 13:52:53

单独保留背景大小，因此它默认的图像的大小。取而代之，通过使用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>

来源

2017-08-02 13:59:06

我使用一个比在实施例不同的图像。如果它不缩放，它非常小，但它是一个SVG。我会如何处理这个问题？ – Zulfe

@Zulfe不确定，我需要看到它。那是我第一次做这样的事情。你为什么不在你的OP中使用这个img？ –

@Zulfe我对图像的中心效果很好，但似乎失去了边缘的百分比...仍然看着那.... –

背景大小如何与元素相关？

回答

相关问题