Question

我正在使用padding-bottom技巧来定义元素的高度以防止回流。通常我会手动执行此操作，但由于我的库中有数百个图像，因此最好使用JavaScript。现在我相信我80％在那里，我只需要改进功能，以便我可以为所有不同的元素获得不同的结果，因为每个图像具有不同的比率。看看代码段：

(function () {

    var tags = document.getElementsByClassName('item');
    var img = document.getElementById('myImg');

    var width = img.naturalWidth;
    var height = img.naturalHeight;


    for (var i = 0; i < tags.length; ++i) {
        tags[i].style.paddingBottom = (100 * (height / width)) + '%';
    }

}());

.item-box {

    display: inline-block;

    width: 30%;

}

.item {

    position: relative;

    display: block;

    border: 1px solid red;

    margin: 0;

}

.item img {

    position: absolute;

    display: block;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

<div class="item-box"> <a class="item"> 
    <img id="myImg" alt="600x400" src="http://lorempixel.com/output/nature-q-c-600-400-1.jpg"/>
  </a>

</div>
<div class="item-box"> <a class="item">
    <img id="myImg" alt="600x900" src="http://lorempixel.com/output/transport-h-c-600-900-10.jpg"/>
  </a>

</div>
<div class="item-box"> <a class="item">
    <img id="myImg" alt="600x600" src="http://lorempixel.com/output/sports-q-c-600-600-10.jpg"/>
  </a>

</div>

我知道ID对于一个元素是唯一的，但我无法找到解决这个问题的另一种方法。图像1看起来很好，但它应用了从Image1（横向）到Image2（应该是纵向）和Image3（应该是正方形）的相同填充。关于如何解决这个问题的任何建议？谢谢！

Answer 1

你可以相对移动＆＃39;从每个链接到其子图像，这样每次指向相应的图像时都可以保证：

(function () {

    var tags = document.getElementsByClassName('item');

    for (var i = 0; i < tags.length; ++i) {
        var img = tags[i].children[0];
        console.log(img);
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        tags[i].style.paddingBottom = (100 * (height / width)) + '%';
    }

}());

这是一个jsfiddle：https://jsfiddle.net/3k5w0qv0/

Answer 2

以下位应该可以分别获取每个图像的尺寸。我还添加了load事件监听器，以确保它获得正确的高度和宽度。

(function () {

    var tags = document.getElementsByClassName('item');

    for (var i = 0; i < tags.length; ++i) {
        var img = tags[i].querySelector('img');
        var src = img ? img.src || false;
        if(src){
            img = document.createElement('img');
            img.addEventListener('load', function(){
                tags[i].style.paddingBottom = (100 * (this.height / this.width)) + '%';
            }, false);
            img.src = src;
        }
    }

}());

Answer 3

您似乎希望在每个 a 元素中使用 item 类将 img 应用于此，因此您可以尝试：

 (function () {

    var tags = document.querySelectorAll('.item');
    var img, width, height, tag;

    for (var i = 0; i < tags.length; ++i) {
      tag = tags[i];
      img = tag.querySelector('img'); 
      tag.style.paddingBottom = (100 * (img.naturalHeight / img.naturalWidth)) + '%';
    }
}());

如何将JavaScript函数应用于同一类（具有不同结果）下的多个不同元素？

3 个答案: