Question

我希望有人可以帮助我或给我一些如何实现这一目标的说明。我有流体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）并将更改填充底部百分比值（在.container类中），例如：

图片宽高比：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>

使用background-image：cover / contains或任何其他解决方案的任何解决方案都不是满足我需求的解决方案。遗憾的是，我需要使用jquery来检查宽高比。

我希望有人能帮助我。

Answer 1

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;

Answer 2

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

为容器div提供id。

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

使用jQuery css函数设置/修改padding-bottom属性：

$('#containerDiv').css("padding-bottom", varPercentage);

jQuery计算背景图像宽高比并更改元素的填充值

2 个答案: