jQuery统计背景图像的纵横比并更改元素的填充值

jQuery counts background-image aspect ratio and changes padding value of an element

本文关键字：元素 填充 背景 统计 图像 jQuery      更新时间：2024-02-27

我希望有人能帮助我或给我一些如何实现这一目标的指导。我有流体div，没有高度和宽度：100%。我想显示适合屏幕大小和这个div元素的背景图像。但遗憾的是，我不能使用背景覆盖或任何其他在现代浏览器中正常工作的解决方案。我也无法设置固定高度（它必须具有响应能力）我已经找到了一个使用图像纵横比的解决方案——它使用底部填充百分比值，但这个解决方案只适用于固定的纵横比，例如16:9或4:3。我需要一些真正流畅的东西。所以我发现，我需要一些脚本，它将自动检查背景图像纵横比，并根据图像纵横比更改填充底部值。但我不知道该怎么做。我只知道jQuery的基础知识。

因此，我正在搜索一个脚本（jQuery），它将检查背景图像的纵横比，并根据此更改元素（div）的底部填充。

假设我有：

HTML:

<div class=“container”>
    <div style=“background-image: url(‘image.png’)”></div>
</div>

CSS：

.container {
    width: 100%;
    height:0;
    padding-bottom: 56.25%;
}

因此，它将检查图像（image.png）的纵横比，并更改填充底部百分比值（在.contator类中），例如：

图像纵横比：16:9

高度/宽度x 100%**在这种情况下：**9/16 x 100%=56.25%

填充底部：56.25%

有可能吗？

如果无法在css文件中进行此更改，也可以在内联css中进行应用，如下所示：

<div class=“container” style=“padding-bottom:56.25%”>
    <div style=“background-image: url(‘image.png’)”></div>
</div>

任何使用背景图像的解决方案：封面/包含或任何其他解决方案都不符合我的需求。遗憾的是，我需要使用jquery来检查纵横比。

我希望有人能帮我。

var image_url = "image.png";
// preload image
var img = new Image();

img.onload = function() {
    var ratio = img.height / img.width x 100;
     $(".container").css("padding-bottom", ratio + "%");
}
img.src = image_url;

假设您在名为varPercentage:的变量中有padding-bottom属性的计算值

给容器分区一个id

<div class=“container” id="containerDiv">
  <div style=“background-image: url(‘image.png’)”></div>
</div>

使用jQuery css函数设置/修改填充底部属性：

$('#containerDiv').css("padding-bottom", varPercentage);
相关文章：