gpt4 book ai didi

javascript - 使用 background-size :contain 时获取 div 背景图像的 XY 坐标和高度/宽度

转载 作者:行者123 更新时间:2023-11-30 13:08:59 26 4
gpt4 key购买 nike

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

为此,我有一个带有以下 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%”)。

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

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

最佳答案

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

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];
}

我已经将其包含在一个示例 fiddle 中:http://jsfiddle.net/y2LE4/

关于javascript - 使用 background-size :contain 时获取 div 背景图像的 XY 坐标和高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14587584/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com