jQuery计算背景图像宽高比并更改元素的填充值-Java 学习之路

我希望有人可以帮助我或给我一些如何实现这一目标的指示 . 我有流体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类中），例如：

image aspect ratio: 16:9

**Height / Width x 100% ** in this case: 9/16 x 100% = 56.25%

padding-bottom: 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来检查宽高比 .

我希望有人可以帮助我 .

2 回答

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;

回复于 2024-04-26T10:57:40+08:00

0
假设您在名为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);
```
回复于 2024-04-26T10:57:40+08:00

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

2 回答

相关问题