Javascript 如何获得图像'；使用Jekyll Liquid语法在for循环中设置宽度和高度，并将其转换为js$变量？

有没有一种方法可以定义（分配或捕获）一个变量，在这个变量中，我可以使用液体逻辑获得图像的宽度和高度？我希望稍后将这些值传递给一个js

$variable

下面是我的网站在使用图像大小值之前所采取的步骤。。。例如：

在每个.markdown文档的前端定义上，我都有一个关联数组列表，如下所示：

single_module:
  - url: 'anchor-480x480.jpg'
    width: "480"
    height: "480"
    alt: 'An image's alt text'
  - url: 'kart2.jpg'
    width: "1300"
    height: "1300"
    alt: 'An image's alt text'

在页面的html布局中，我有一个

for循环

，它从文档的前端获取我需要的所有值。此时，我将前面定义的每个图像的宽度和高度值转换为html中

url:

键的

数据属性

{% assign modules = page.single_module %}
{% for module in modules %}
<div class="module default-module" data-bgimage="{{ site.baseurl | prepend: site.project_upload_path }}{{module.url}}" data-width="{{module.width}}" data-height="{{module.height}}">
</div>

这似乎超出了我的编程技能，因为我不是开发人员，而是喜欢编写代码的设计师。无论如何，我该如何将存储在

数据宽度

和

数据高度

属性中的jekyll for循环语法中的值传递给js

$img

变量呢

从上述函数中提取，我尝试了以下方法：

---

由于您已经使用Liquid将数据获取到HTML中，现在（如果我理解正确的话），您只需要将数据从HTML DOM获取到脚本中。您可以使用与获取

bgimage

相同的方式获取图像

这就是你要找的吗

oldHeight = moduleImage.data('height'),
oldWidth = moduleImage.data('width'),

---

我想你想要一个全屏背景图像。如果你不支持IE8，你可以使用CSS命令background:url（'yourimage'）和background-size:cover。这似乎是解决你问题的最简单办法。少（代码）就是多…

您可以使用这个jekyll插件。它允许您在模板中的任何位置添加液体标记，以从本地资源中提取宽度和高度信息，并以多种不同格式输出。例如：

让{width，height}={{imagesize/assets/image.png:json}；

$(document).ready(function(){ 

var moduleImage = $(".module");
// Create the $img variable
var $img = moduleImage.data("bgimage");

...

ui : {
resizeElement : function($img, h){

// This function resizes a given element over a certain height. It also centers the element...

var maxHeight = h,
maxWidth = $(window).width(),
oldHeight = $img.height(),
oldWidth = $img.width(),
ratio = Math.max(oldWidth / oldHeight, oldHeight / oldWidth),
newHeight = 0,
newWidth = 0;

// Complex calculations to get the perfect size

if(oldWidth > oldHeight){

if ( maxHeight * ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth / ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight * ratio;
}

} else {

if ( maxHeight / ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth * ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight / ratio;
}

}

// Apply the correct size and reposition

$img.css({
'width': Math.ceil(newWidth),
'height': Math.ceil(newHeight),
'top': Math.round((h-newHeight)/2),
'left': Math.round(($(window).width()-newWidth)/2)
});

},

});//end document.ready

var moduleImage = $(".module");
// Create new offscreen image to test
var $img = moduleImage.data("bgimage");

oldHeight = $img.height(),
oldWidth = $img.width(),

oldHeight = moduleImage.data('height'),
oldWidth = moduleImage.data('width'),