javascript - jQuery获取背景图像高度并根据比例更改父级

Question

我有每个元素的背景图片；在本例中，图像大小为 580x374。

这是在 li 上内联设置的，每个元素都作为背景图像，但我需要设置元素高度，以便它正确显示。返回的图像高度我需要减半，因为它是两个图像合二为一，我需要在悬停时移动位置，但我可以做到。

我遇到的问题是获取元素宽度、获取背景大小、计算背景图像大小的比例以及设置容器的高度以显示它。

我也需要它具有响应性，因此无论视口(viewport)大小如何，它都会在页面加载时正确设置并调整大小。

这是我到目前为止所做的，但我是 JS 的新手。

HTML 示例:

<ul>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
</ul>

JS:

$('.collection-hover a').each(function (index, value){
  var collection_bg_img = new Image;
  collection_bg_img.src = $(this).data('image');         
  var bgImgWidth = collection_bg_img.width;
  var bgImgHeight = collection_bg_img.height;
  var divWidth = $(this).width();
  var realImgHeight = ( bgImgHeight / bgImgWidth) * divWidth;
  var halfImage = (realImgHeight / 2);
  $(this).height(halfImage);
  //console.log(halfImage);
});

我想可以设置最大宽度和高度并根据视口(viewport)设置的宽度更改它的宽度并根据比例调整高度？

更新

我试过这样的东西，虽然还没有让它工作......但也许是一个很好的方法，因为最大宽度:

$('.collection-hover a').each(function() {
var maxWidth = 580; // Max width for the image
var maxHeight = 374;    // Max height for the image
var ratio = 0;  // Used for aspect ratio
var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
  ratio = maxWidth / width;   // get ratio for scaling image
  $(this).css("width", maxWidth); // Set new width
  $(this).css("height", height * ratio);  // Scale height based on ratio
  height = height * ratio;    // Reset height to match scaled image
}

var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if current height is larger than max
if(height > maxHeight){
  ratio = maxHeight / height; // get ratio for scaling image
  $(this).css("height", maxHeight);   // Set new height
  $(this).css("width", width * ratio);    // Scale width based on ratio
  width = width * ratio;    // Reset width to match scaled image
}

});

Answer 1

你只能:

• 在文档就绪 之后处理 DOM 元素
• 在成功加载后测量图像的宽度。

因此:

jQuery(function($) {
    function resizeBgImgContainers() {
        $('.collection-hover a').each(function() {
            var $a = $(this);
            var img = new Image();
            img.onload = function() {
                $a.height(img.height * $a.width() / img.width / 2);
            };
            img.src = $a.data('image');         
        });
    }
    $(window).on('resize', resizeBgImgContainers).trigger('resize');
});