1

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

为此，我有一个带有以下 CSS 的“容器”div：

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 元素，这些元素也被缩放到与背景图像相同的位置。

我最初认为使用 JQuery 并阅读“background-image-x”、“background-image-y”、“background-image-x”、“background-position-x”和“background-position-y” CSS属性可能会给我定位附加元素所需的信息。

但是，这些并没有返回所需的信息（例如，image-x 和 image-y 都返回“50%”）。

是否有一些不错且简单（ish）的方法来实现我需要的...或者我将不得不求助于使用 Javascript 和数学来手动设置背景图像的位置和大小（从而给我我需要的答案)?

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

4

2 回答 2

3

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

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

之后，您可以非常简单地计算出偏移量，因为您可以计算出图像缩放的百分比。并将其应用于相反的测量，并将其与容器进行比较。

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/

于 2013-01-29T17:46:49.040 回答
0

我希望能有所帮助。

尝试：

$(document).ready(function(){

var something = background.offset();

 }

或者

$(document).ready(function(){
      var something = $('.background').outerWidth(true);
}

或者只是宽度功能：http ://api.jquery.com/width/

于 2013-01-29T17:20:05.877 回答