Question

我使用以下代码设置了背景图像。

background-image: url('url');
background-position: center;
background-size: contain;

这会将图像放在div的中心。

是否有任何方法或计算可以找到像素中的宽度（图像中的问号）？

Answer 1

我们假设您不知道图像比率。

//getting the image URL (code from [here][1])
var url = $('CONTAINER_SELECTOR').css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');

//creating the image
var img = new Image;

img.src = url;

//WARNING: Im not dealing with the "image loaded" question.

var ratio = null;
if(img.height){
   ratio = img.width / height;
}


var containerWidth = $('CONTAINER_SELECTOR').innerWidth();

var difference = ($('CONTAINER_SELECTOR').innerHeight() - (containerWidth / ratio)) / 2);

我没有测试。之后我会在必要时做一个小提琴手。

请注意：当容器的比例低于1且图像的比率高于1时，上面的代码可能需要调整，反之亦然。

Answer 2

您可以使用

append

或

<body>

<div>
  <p>Hello</p>
</div>
<p></p>

<script>
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>

</body>

如何使用JavaScript找到背景图像的y位置（以像素为单位）？

2 个答案: