获取XY坐标&div背景图片的高度/宽度，当使用background-size:contain时 [英] Get XY coords & Height/Width of div background image, when using background-size:contain

问题描述

我正在设计一个网页，其中包含一张用于主页背景图像的照片.图像必须覆盖尽可能多的可用窗口大小，同时保持正确的宽高比.

I'm designing a web page that has a photo for a background image of the main page. The image must cover as much of the available window size as possible, whilst maintaining the correct aspect ratio.

为此，我有一个带有以下CSS的容器" div:

To that end, I have a "container" div with the following CSS:

div.background {
    background-image: url('/Content/Images/Home/main-bg.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;    
    float:left;
    width:100%;
}

运行良好.

但是，我现在需要在图像上的特定位置放置额外的 dom 元素，这些元素也被缩放到与背景图像相同的位置.

However, I now need to position additional dom elements at specific places on the image, which are also scaled to the same as background image.

最初，我认为使用JQuery读取"background-image-x"，"background-image-y"，"background-image-x"，"background-position-x"和"background-position-y" CSS属性可能会为我提供放置其他元素所需的信息.

I initially thought that using JQuery and reading the "background-image-x","background-image-y", "background-image-x", "background-position-x", and "background-position-y" CSS properties might give me the information I need to position the additional elements.

然而，这些并没有返回所需的信息(例如，image-x 和 image-y 都返回50%").

However, these are not returning the needed information (for example, image-x and image-y both return "50%").

是否有一些不错且简单的方法来实现我所需要的...或者我将不得不使用Javascript和数学手动设置背景图像的位置和大小(因此给了我我需要的答案)?

Is there some nice and simple(ish) way to achieve what I need... or am I going to have to resort to using Javascript and math to manually set the position and size of the background image (thus giving me the answers I need)?

我讨厌数学.请不要让我使用它:)

推荐答案

您可以使用一些非常简单的比较比率来解决这个问题，即图像宽度与图像高度，容器宽度与容器高度的比较.确定图像是水平缩放还是垂直缩放.

You could work this out with some quite simple comparative ratios, of the image width vs image height compared to container width vs container height. To work out whether the image will be scaled horizontally or vertically.

img_ratio = img_width / img_height;
container_ratio = $(elm).width() / $(elm).height();

接着，您可以很简单地计算出偏移量，就像可以按比例缩放图像一样.并将其应用于相反的度量，然后将其与容器进行比较.

Following that you can work out the offset quite simply as you can work out by what percentage the image has been scaled. And apply that to the opposite mesasurement, and compare it to the container.

if(container_ratio > img_ratio){
    //centered x height 100%
        var scale_percent = $(elm).height() / img_height;
        var scaled_width = img_width * scale_percent;
        var x_offset = ($(elm).width() - scaled_width) / 2;
        offset = [x_offset, 0];
}else{
    //centered y width 100%
        var scale_percent = $(elm).width() / img_width;
        var scaled_height = img_height * scale_percent;
        var y_offset = ($(elm).height() - scaled_height) / 2;
        offset = [0, y_offset];
}

我已将其包含在示例小提琴中:http://jsfiddle.net/y2LE4/

I've wrapped this up in an example fiddle at: http://jsfiddle.net/y2LE4/

这篇关于获取XY坐标&div背景图片的高度/宽度，当使用background-size:contain时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！